@charset "UTF-8";
/**
 * Foundation for Sites
 * Version 6.6.3
 * https://get.foundation
 * Licensed under MIT Open Source
 */
@media print, screen and (min-width: 40em) {
  header .reveal,
  footer .reveal, header .reveal.tiny,
  footer .reveal.tiny, header .reveal.small,
  footer .reveal.small, header .reveal.large,
  footer .reveal.large {
    right: auto;
    left: auto;
    margin: 0 auto; } }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

header,
footer {
  /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
  /* missing foundation style in the new version */
  /* I add this because right now we have miss match version in js and css for foundation */
  /**
    * 1. Calculate full width minus toggle size plus one.
    */
  /**
    * 1. Take up the remaining space.
    */
  /**
    * Additional styles ported over from gloabl and custom files for header and footer
    */
  /**
    * 1. For non 100% width mobile modals the background is invisible.
    *   This fixes the overlay issue.
    */
  /****************************************/
  /*****        Global Styles         *****/
  /****************************************/
  /**
  * Grid fix for foundation
  * This is temporary since there is a fix in the next version.
  * Originally in file _flex-grid.scss
  */
  /**
  * 1. Set the max width for different screen sizes.
  */
  /**
  * Align the contaner in the center.
  */
  /**
  * Prevent breaking phone number links
  */
  /**
 * 1. Dumbs the 'html-content-map' variables into the html elements before pseudoelement.
 *     This is used to have access to sass data in the javascript.
 *     To add more data edit the _settings.scss file at the bottom and add your data.
 */
  /**
 * As a general rule most iframes should be 100% width with no border (to look natural).
 * To control the size use a wrapper class.
 */
  /**
 * Make videos responsive,
 * they should never be larger then the parent.
 */
  /**
 * Figures should not have an explicit margin set.
 */
  /**
 * 1. Allow padding to be added to links.
 *   This is still super unspecific and can be easily overwritten if needed.
 * 2. Give the anchors a more subtle color transition.
 *     Background used for megamenu and buttons.
 */
  /**
 * Make buttons have the pointer cursor to indicate functionality.
 */
  /**
 * Rmove default fieldset styles
 */
  /**
 * Make all inputs 100%.
 * Size them with a wrapper.
 */
  /**
 * Foundation sets the border-box for all inputs to box sizing.
 * Undo that.
 */
  /**
 * Picture is set to 'block' by default
 *   block fixes issues in IE11
 *   Modifying this because there's no instance of text next to picture
 *   We need to change that so it will adhere to its parent size.
 */
  /**
 * 1. Override Foundations default offset with the one our designers specified.
 */
  /**
 * Sizing utility.
 *
 * This sets the size of the element to the normal text size.
 *
 */ }
  header html,
  footer html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%; }
  header body,
  footer body {
    margin: 0; }
  header h1,
  footer h1 {
    font-size: 2em;
    margin: 0.67em 0; }
  header hr,
  footer hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible; }
  header pre,
  footer pre {
    font-family: monospace, monospace;
    font-size: 1em; }
  header a,
  footer a {
    background-color: transparent; }
  header abbr[title],
  footer abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted; }
  header b,
  header strong,
  footer b,
  footer strong {
    font-weight: bolder; }
  header code,
  header kbd,
  header samp,
  footer code,
  footer kbd,
  footer samp {
    font-family: monospace, monospace;
    font-size: 1em; }
  header small,
  footer small {
    font-size: 80%; }
  header sub,
  header sup,
  footer sub,
  footer sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline; }
  header sub,
  footer sub {
    bottom: -0.25em; }
  header sup,
  footer sup {
    top: -0.5em; }
  header img,
  footer img {
    border-style: none; }
  header button,
  header input,
  header optgroup,
  header select,
  header textarea,
  footer button,
  footer input,
  footer optgroup,
  footer select,
  footer textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0; }
  header button,
  header input,
  footer button,
  footer input {
    overflow: visible; }
  header button,
  header select,
  footer button,
  footer select {
    text-transform: none; }
  header button,
  header [type="button"],
  header [type="reset"],
  header [type="submit"],
  footer button,
  footer [type="button"],
  footer [type="reset"],
  footer [type="submit"] {
    -webkit-appearance: button; }
  header button::-moz-focus-inner,
  header [type="button"]::-moz-focus-inner,
  header [type="reset"]::-moz-focus-inner,
  header [type="submit"]::-moz-focus-inner,
  footer button::-moz-focus-inner,
  footer [type="button"]::-moz-focus-inner,
  footer [type="reset"]::-moz-focus-inner,
  footer [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0; }
  header button:-moz-focusring,
  header [type="button"]:-moz-focusring,
  header [type="reset"]:-moz-focusring,
  header [type="submit"]:-moz-focusring,
  footer button:-moz-focusring,
  footer [type="button"]:-moz-focusring,
  footer [type="reset"]:-moz-focusring,
  footer [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText; }
  header fieldset,
  footer fieldset {
    padding: 0.35em 0.75em 0.625em; }
  header legend,
  footer legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal; }
  header progress,
  footer progress {
    vertical-align: baseline; }
  header textarea,
  footer textarea {
    overflow: auto; }
  header [type="checkbox"],
  header [type="radio"],
  footer [type="checkbox"],
  footer [type="radio"] {
    box-sizing: border-box;
    padding: 0; }
  header [type="number"]::-webkit-inner-spin-button,
  header [type="number"]::-webkit-outer-spin-button,
  footer [type="number"]::-webkit-inner-spin-button,
  footer [type="number"]::-webkit-outer-spin-button {
    height: auto; }
  header [type="search"],
  footer [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px; }
  header [type="search"]::-webkit-search-decoration,
  footer [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }
  header ::-webkit-file-upload-button,
  footer ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit; }
  header details,
  footer details {
    display: block; }
  header summary,
  footer summary {
    display: list-item; }
  header template,
  footer template {
    display: none; }
  header [hidden],
  footer [hidden] {
    display: none; }
  header .foundation-mq,
  footer .foundation-mq {
    font-family: "small=0rem&medium=46rem&large=63.9375rem&xlarge=76.5625rem&xxlarge=90rem"; }
  header html,
  footer html {
    box-sizing: border-box;
    font-size: 16px; }
  header *,
  header *::before,
  header *::after,
  footer *,
  footer *::before,
  footer *::after {
    box-sizing: inherit; }
  header body,
  footer body {
    margin: 0;
    padding: 0;
    background: #fefefe;
    font-family: "Heebo", sans-serif;
    font-weight: normal;
    line-height: 1.4;
    color: #001928;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  header img,
  footer img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic; }
  header textarea,
  footer textarea {
    height: auto;
    min-height: 50px;
    border-radius: 0; }
  header select,
  footer select {
    box-sizing: border-box;
    width: 100%;
    border-radius: 0; }
  header .map_canvas img,
  header .map_canvas embed,
  header .map_canvas object,
  header .mqa-display img,
  header .mqa-display embed,
  header .mqa-display object,
  footer .map_canvas img,
  footer .map_canvas embed,
  footer .map_canvas object,
  footer .mqa-display img,
  footer .mqa-display embed,
  footer .mqa-display object {
    max-width: none !important; }
  header button,
  footer button {
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    line-height: 1;
    cursor: auto; }
    [data-whatinput='mouse'] header button, [data-whatinput='mouse']
    footer button {
      outline: 0; }
  header pre,
  footer pre {
    overflow: auto; }
  header button,
  header input,
  header optgroup,
  header select,
  header textarea,
  footer button,
  footer input,
  footer optgroup,
  footer select,
  footer textarea {
    font-family: inherit; }
  header .is-visible,
  footer .is-visible {
    display: block !important; }
  header .is-hidden,
  footer .is-hidden {
    display: none !important; }
  header .row,
  footer .row {
    max-width: 75rem;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-flow: row wrap; }
    header .row .row,
    footer .row .row {
      margin-right: -0.375rem;
      margin-left: -0.375rem; }
      @media screen and (min-width: 46rem) {
        header .row .row,
        footer .row .row {
          margin-right: -0.75rem;
          margin-left: -0.75rem; } }
      @media screen and (min-width: 63.9375rem) {
        header .row .row,
        footer .row .row {
          margin-right: -0.75rem;
          margin-left: -0.75rem; } }
      @media screen and (min-width: 76.5625rem) {
        header .row .row,
        footer .row .row {
          margin-right: -0.75rem;
          margin-left: -0.75rem; } }
      header .row .row.collapse,
      footer .row .row.collapse {
        margin-right: 0;
        margin-left: 0; }
    header .row.expanded,
    footer .row.expanded {
      max-width: none; }
      header .row.expanded .row,
      footer .row.expanded .row {
        margin-right: auto;
        margin-left: auto; }
    header .row:not(.expanded) .row,
    footer .row:not(.expanded) .row {
      max-width: none; }
    header .row.collapse > .column, header .row.collapse > .columns,
    header footer .row.collapse > .columns,
    footer .row.collapse > .column,
    footer header .row.collapse > .columns,
    footer .row.collapse > .columns {
      padding-right: 0;
      padding-left: 0; }
    header .row.is-collapse-child,
    header .row.collapse > .column > .row,
    header .row.collapse > .columns > .row,
    header footer .row.collapse > .columns > .row,
    footer .row.is-collapse-child,
    footer .row.collapse > .column > .row,
    footer header .row.collapse > .columns > .row,
    footer .row.collapse > .columns > .row {
      margin-right: 0;
      margin-left: 0; }
  header .column, header .columns,
  footer .column,
  footer .columns {
    flex: 1 1 0px;
    padding-right: 0.375rem;
    padding-left: 0.375rem;
    min-width: 0; }
    @media screen and (min-width: 46rem) {
      header .column, header .columns,
      footer .column,
      footer .columns {
        padding-right: 0.75rem;
        padding-left: 0.75rem; } }
    @media screen and (min-width: 63.9375rem) {
      header .column, header .columns,
      footer .column,
      footer .columns {
        padding-right: 0.75rem;
        padding-left: 0.75rem; } }
  header .column.row.row, header .row.row.columns,
  footer .column.row.row,
  footer .row.row.columns {
    float: none;
    display: block; }
  header .row .column.row.row, header .row .row.row.columns,
  footer .row .column.row.row,
  footer .row .row.row.columns {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0; }
  header .small-1,
  footer .small-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  header .small-offset-0,
  footer .small-offset-0 {
    margin-left: 0%; }
  header .small-2,
  footer .small-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  header .small-offset-1,
  footer .small-offset-1 {
    margin-left: 8.33333%; }
  header .small-3,
  footer .small-3 {
    flex: 0 0 25%;
    max-width: 25%; }
  header .small-offset-2,
  footer .small-offset-2 {
    margin-left: 16.66667%; }
  header .small-4,
  footer .small-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  header .small-offset-3,
  footer .small-offset-3 {
    margin-left: 25%; }
  header .small-5,
  footer .small-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  header .small-offset-4,
  footer .small-offset-4 {
    margin-left: 33.33333%; }
  header .small-6,
  footer .small-6 {
    flex: 0 0 50%;
    max-width: 50%; }
  header .small-offset-5,
  footer .small-offset-5 {
    margin-left: 41.66667%; }
  header .small-7,
  footer .small-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  header .small-offset-6,
  footer .small-offset-6 {
    margin-left: 50%; }
  header .small-8,
  footer .small-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  header .small-offset-7,
  footer .small-offset-7 {
    margin-left: 58.33333%; }
  header .small-9,
  footer .small-9 {
    flex: 0 0 75%;
    max-width: 75%; }
  header .small-offset-8,
  footer .small-offset-8 {
    margin-left: 66.66667%; }
  header .small-10,
  footer .small-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  header .small-offset-9,
  footer .small-offset-9 {
    margin-left: 75%; }
  header .small-11,
  footer .small-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  header .small-offset-10,
  footer .small-offset-10 {
    margin-left: 83.33333%; }
  header .small-12,
  footer .small-12 {
    flex: 0 0 100%;
    max-width: 100%; }
  header .small-offset-11,
  footer .small-offset-11 {
    margin-left: 91.66667%; }
  header .small-up-1,
  footer .small-up-1 {
    flex-wrap: wrap; }
    header .small-up-1 > .column, header .small-up-1 > .columns,
    header footer .small-up-1 > .columns,
    footer .small-up-1 > .column,
    footer header .small-up-1 > .columns,
    footer .small-up-1 > .columns {
      flex: 0 0 100%;
      max-width: 100%; }
  header .small-up-2,
  footer .small-up-2 {
    flex-wrap: wrap; }
    header .small-up-2 > .column, header .small-up-2 > .columns,
    header footer .small-up-2 > .columns,
    footer .small-up-2 > .column,
    footer header .small-up-2 > .columns,
    footer .small-up-2 > .columns {
      flex: 0 0 50%;
      max-width: 50%; }
  header .small-up-3,
  footer .small-up-3 {
    flex-wrap: wrap; }
    header .small-up-3 > .column, header .small-up-3 > .columns,
    header footer .small-up-3 > .columns,
    footer .small-up-3 > .column,
    footer header .small-up-3 > .columns,
    footer .small-up-3 > .columns {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
  header .small-up-4,
  footer .small-up-4 {
    flex-wrap: wrap; }
    header .small-up-4 > .column, header .small-up-4 > .columns,
    header footer .small-up-4 > .columns,
    footer .small-up-4 > .column,
    footer header .small-up-4 > .columns,
    footer .small-up-4 > .columns {
      flex: 0 0 25%;
      max-width: 25%; }
  header .small-up-5,
  footer .small-up-5 {
    flex-wrap: wrap; }
    header .small-up-5 > .column, header .small-up-5 > .columns,
    header footer .small-up-5 > .columns,
    footer .small-up-5 > .column,
    footer header .small-up-5 > .columns,
    footer .small-up-5 > .columns {
      flex: 0 0 20%;
      max-width: 20%; }
  header .small-up-6,
  footer .small-up-6 {
    flex-wrap: wrap; }
    header .small-up-6 > .column, header .small-up-6 > .columns,
    header footer .small-up-6 > .columns,
    footer .small-up-6 > .column,
    footer header .small-up-6 > .columns,
    footer .small-up-6 > .columns {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
  header .small-up-7,
  footer .small-up-7 {
    flex-wrap: wrap; }
    header .small-up-7 > .column, header .small-up-7 > .columns,
    header footer .small-up-7 > .columns,
    footer .small-up-7 > .column,
    footer header .small-up-7 > .columns,
    footer .small-up-7 > .columns {
      flex: 0 0 14.28571%;
      max-width: 14.28571%; }
  header .small-up-8,
  footer .small-up-8 {
    flex-wrap: wrap; }
    header .small-up-8 > .column, header .small-up-8 > .columns,
    header footer .small-up-8 > .columns,
    footer .small-up-8 > .column,
    footer header .small-up-8 > .columns,
    footer .small-up-8 > .columns {
      flex: 0 0 12.5%;
      max-width: 12.5%; }
  header .small-collapse > .column, header .small-collapse > .columns,
  header footer .small-collapse > .columns,
  footer .small-collapse > .column,
  footer header .small-collapse > .columns,
  footer .small-collapse > .columns {
    padding-right: 0;
    padding-left: 0; }
  header .small-uncollapse > .column, header .small-uncollapse > .columns,
  header footer .small-uncollapse > .columns,
  footer .small-uncollapse > .column,
  footer header .small-uncollapse > .columns,
  footer .small-uncollapse > .columns {
    padding-right: 0.375rem;
    padding-left: 0.375rem; }
  @media screen and (min-width: 46rem) {
    header .medium-1,
    footer .medium-1 {
      flex: 0 0 8.33333%;
      max-width: 8.33333%; }
    header .medium-offset-0,
    footer .medium-offset-0 {
      margin-left: 0%; }
    header .medium-2,
    footer .medium-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    header .medium-offset-1,
    footer .medium-offset-1 {
      margin-left: 8.33333%; }
    header .medium-3,
    footer .medium-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    header .medium-offset-2,
    footer .medium-offset-2 {
      margin-left: 16.66667%; }
    header .medium-4,
    footer .medium-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    header .medium-offset-3,
    footer .medium-offset-3 {
      margin-left: 25%; }
    header .medium-5,
    footer .medium-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    header .medium-offset-4,
    footer .medium-offset-4 {
      margin-left: 33.33333%; }
    header .medium-6,
    footer .medium-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    header .medium-offset-5,
    footer .medium-offset-5 {
      margin-left: 41.66667%; }
    header .medium-7,
    footer .medium-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    header .medium-offset-6,
    footer .medium-offset-6 {
      margin-left: 50%; }
    header .medium-8,
    footer .medium-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    header .medium-offset-7,
    footer .medium-offset-7 {
      margin-left: 58.33333%; }
    header .medium-9,
    footer .medium-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    header .medium-offset-8,
    footer .medium-offset-8 {
      margin-left: 66.66667%; }
    header .medium-10,
    footer .medium-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    header .medium-offset-9,
    footer .medium-offset-9 {
      margin-left: 75%; }
    header .medium-11,
    footer .medium-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    header .medium-offset-10,
    footer .medium-offset-10 {
      margin-left: 83.33333%; }
    header .medium-12,
    footer .medium-12 {
      flex: 0 0 100%;
      max-width: 100%; }
    header .medium-offset-11,
    footer .medium-offset-11 {
      margin-left: 91.66667%; }
    header .medium-up-1,
    footer .medium-up-1 {
      flex-wrap: wrap; }
      header .medium-up-1 > .column, header .medium-up-1 > .columns,
      header footer .medium-up-1 > .columns,
      footer .medium-up-1 > .column,
      footer header .medium-up-1 > .columns,
      footer .medium-up-1 > .columns {
        flex: 0 0 100%;
        max-width: 100%; }
    header .medium-up-2,
    footer .medium-up-2 {
      flex-wrap: wrap; }
      header .medium-up-2 > .column, header .medium-up-2 > .columns,
      header footer .medium-up-2 > .columns,
      footer .medium-up-2 > .column,
      footer header .medium-up-2 > .columns,
      footer .medium-up-2 > .columns {
        flex: 0 0 50%;
        max-width: 50%; }
    header .medium-up-3,
    footer .medium-up-3 {
      flex-wrap: wrap; }
      header .medium-up-3 > .column, header .medium-up-3 > .columns,
      header footer .medium-up-3 > .columns,
      footer .medium-up-3 > .column,
      footer header .medium-up-3 > .columns,
      footer .medium-up-3 > .columns {
        flex: 0 0 33.33333%;
        max-width: 33.33333%; }
    header .medium-up-4,
    footer .medium-up-4 {
      flex-wrap: wrap; }
      header .medium-up-4 > .column, header .medium-up-4 > .columns,
      header footer .medium-up-4 > .columns,
      footer .medium-up-4 > .column,
      footer header .medium-up-4 > .columns,
      footer .medium-up-4 > .columns {
        flex: 0 0 25%;
        max-width: 25%; }
    header .medium-up-5,
    footer .medium-up-5 {
      flex-wrap: wrap; }
      header .medium-up-5 > .column, header .medium-up-5 > .columns,
      header footer .medium-up-5 > .columns,
      footer .medium-up-5 > .column,
      footer header .medium-up-5 > .columns,
      footer .medium-up-5 > .columns {
        flex: 0 0 20%;
        max-width: 20%; }
    header .medium-up-6,
    footer .medium-up-6 {
      flex-wrap: wrap; }
      header .medium-up-6 > .column, header .medium-up-6 > .columns,
      header footer .medium-up-6 > .columns,
      footer .medium-up-6 > .column,
      footer header .medium-up-6 > .columns,
      footer .medium-up-6 > .columns {
        flex: 0 0 16.66667%;
        max-width: 16.66667%; }
    header .medium-up-7,
    footer .medium-up-7 {
      flex-wrap: wrap; }
      header .medium-up-7 > .column, header .medium-up-7 > .columns,
      header footer .medium-up-7 > .columns,
      footer .medium-up-7 > .column,
      footer header .medium-up-7 > .columns,
      footer .medium-up-7 > .columns {
        flex: 0 0 14.28571%;
        max-width: 14.28571%; }
    header .medium-up-8,
    footer .medium-up-8 {
      flex-wrap: wrap; }
      header .medium-up-8 > .column, header .medium-up-8 > .columns,
      header footer .medium-up-8 > .columns,
      footer .medium-up-8 > .column,
      footer header .medium-up-8 > .columns,
      footer .medium-up-8 > .columns {
        flex: 0 0 12.5%;
        max-width: 12.5%; } }

@media screen and (min-width: 46rem) and (min-width: 46rem) {
  header .medium-expand,
  footer .medium-expand {
    flex: 1 1 0px; } }

.row.medium-unstack > .column, header .row.medium-unstack > .columns,
footer .row.medium-unstack > .columns {
  flex: 0 0 100%; }
  @media screen and (min-width: 46rem) {
    .row.medium-unstack > .column, header .row.medium-unstack > .columns,
    footer .row.medium-unstack > .columns {
      flex: 1 1 0px; } }
  @media screen and (min-width: 46rem) {
    header .medium-collapse > .column, header .medium-collapse > .columns,
    header footer .medium-collapse > .columns,
    footer .medium-collapse > .column,
    footer header .medium-collapse > .columns,
    footer .medium-collapse > .columns {
      padding-right: 0;
      padding-left: 0; }
    header .medium-uncollapse > .column, header .medium-uncollapse > .columns,
    header footer .medium-uncollapse > .columns,
    footer .medium-uncollapse > .column,
    footer header .medium-uncollapse > .columns,
    footer .medium-uncollapse > .columns {
      padding-right: 0.75rem;
      padding-left: 0.75rem; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-1,
    footer .large-1 {
      flex: 0 0 8.33333%;
      max-width: 8.33333%; }
    header .large-offset-0,
    footer .large-offset-0 {
      margin-left: 0%; }
    header .large-2,
    footer .large-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    header .large-offset-1,
    footer .large-offset-1 {
      margin-left: 8.33333%; }
    header .large-3,
    footer .large-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    header .large-offset-2,
    footer .large-offset-2 {
      margin-left: 16.66667%; }
    header .large-4,
    footer .large-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    header .large-offset-3,
    footer .large-offset-3 {
      margin-left: 25%; }
    header .large-5,
    footer .large-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    header .large-offset-4,
    footer .large-offset-4 {
      margin-left: 33.33333%; }
    header .large-6,
    footer .large-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    header .large-offset-5,
    footer .large-offset-5 {
      margin-left: 41.66667%; }
    header .large-7,
    footer .large-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    header .large-offset-6,
    footer .large-offset-6 {
      margin-left: 50%; }
    header .large-8,
    footer .large-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    header .large-offset-7,
    footer .large-offset-7 {
      margin-left: 58.33333%; }
    header .large-9,
    footer .large-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    header .large-offset-8,
    footer .large-offset-8 {
      margin-left: 66.66667%; }
    header .large-10,
    footer .large-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    header .large-offset-9,
    footer .large-offset-9 {
      margin-left: 75%; }
    header .large-11,
    footer .large-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    header .large-offset-10,
    footer .large-offset-10 {
      margin-left: 83.33333%; }
    header .large-12,
    footer .large-12 {
      flex: 0 0 100%;
      max-width: 100%; }
    header .large-offset-11,
    footer .large-offset-11 {
      margin-left: 91.66667%; }
    header .large-up-1,
    footer .large-up-1 {
      flex-wrap: wrap; }
      header .large-up-1 > .column, header .large-up-1 > .columns,
      header footer .large-up-1 > .columns,
      footer .large-up-1 > .column,
      footer header .large-up-1 > .columns,
      footer .large-up-1 > .columns {
        flex: 0 0 100%;
        max-width: 100%; }
    header .large-up-2,
    footer .large-up-2 {
      flex-wrap: wrap; }
      header .large-up-2 > .column, header .large-up-2 > .columns,
      header footer .large-up-2 > .columns,
      footer .large-up-2 > .column,
      footer header .large-up-2 > .columns,
      footer .large-up-2 > .columns {
        flex: 0 0 50%;
        max-width: 50%; }
    header .large-up-3,
    footer .large-up-3 {
      flex-wrap: wrap; }
      header .large-up-3 > .column, header .large-up-3 > .columns,
      header footer .large-up-3 > .columns,
      footer .large-up-3 > .column,
      footer header .large-up-3 > .columns,
      footer .large-up-3 > .columns {
        flex: 0 0 33.33333%;
        max-width: 33.33333%; }
    header .large-up-4,
    footer .large-up-4 {
      flex-wrap: wrap; }
      header .large-up-4 > .column, header .large-up-4 > .columns,
      header footer .large-up-4 > .columns,
      footer .large-up-4 > .column,
      footer header .large-up-4 > .columns,
      footer .large-up-4 > .columns {
        flex: 0 0 25%;
        max-width: 25%; }
    header .large-up-5,
    footer .large-up-5 {
      flex-wrap: wrap; }
      header .large-up-5 > .column, header .large-up-5 > .columns,
      header footer .large-up-5 > .columns,
      footer .large-up-5 > .column,
      footer header .large-up-5 > .columns,
      footer .large-up-5 > .columns {
        flex: 0 0 20%;
        max-width: 20%; }
    header .large-up-6,
    footer .large-up-6 {
      flex-wrap: wrap; }
      header .large-up-6 > .column, header .large-up-6 > .columns,
      header footer .large-up-6 > .columns,
      footer .large-up-6 > .column,
      footer header .large-up-6 > .columns,
      footer .large-up-6 > .columns {
        flex: 0 0 16.66667%;
        max-width: 16.66667%; }
    header .large-up-7,
    footer .large-up-7 {
      flex-wrap: wrap; }
      header .large-up-7 > .column, header .large-up-7 > .columns,
      header footer .large-up-7 > .columns,
      footer .large-up-7 > .column,
      footer header .large-up-7 > .columns,
      footer .large-up-7 > .columns {
        flex: 0 0 14.28571%;
        max-width: 14.28571%; }
    header .large-up-8,
    footer .large-up-8 {
      flex-wrap: wrap; }
      header .large-up-8 > .column, header .large-up-8 > .columns,
      header footer .large-up-8 > .columns,
      footer .large-up-8 > .column,
      footer header .large-up-8 > .columns,
      footer .large-up-8 > .columns {
        flex: 0 0 12.5%;
        max-width: 12.5%; } }

@media screen and (min-width: 63.9375rem) and (min-width: 63.9375rem) {
  header .large-expand,
  footer .large-expand {
    flex: 1 1 0px; } }

.row.large-unstack > .column, header .row.large-unstack > .columns,
footer .row.large-unstack > .columns {
  flex: 0 0 100%; }
  @media screen and (min-width: 63.9375rem) {
    .row.large-unstack > .column, header .row.large-unstack > .columns,
    footer .row.large-unstack > .columns {
      flex: 1 1 0px; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-collapse > .column, header .large-collapse > .columns,
    header footer .large-collapse > .columns,
    footer .large-collapse > .column,
    footer header .large-collapse > .columns,
    footer .large-collapse > .columns {
      padding-right: 0;
      padding-left: 0; }
    header .large-uncollapse > .column, header .large-uncollapse > .columns,
    header footer .large-uncollapse > .columns,
    footer .large-uncollapse > .column,
    footer header .large-uncollapse > .columns,
    footer .large-uncollapse > .columns {
      padding-right: 0.75rem;
      padding-left: 0.75rem; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-1,
    footer .xlarge-1 {
      flex: 0 0 8.33333%;
      max-width: 8.33333%; }
    header .xlarge-offset-0,
    footer .xlarge-offset-0 {
      margin-left: 0%; }
    header .xlarge-2,
    footer .xlarge-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    header .xlarge-offset-1,
    footer .xlarge-offset-1 {
      margin-left: 8.33333%; }
    header .xlarge-3,
    footer .xlarge-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    header .xlarge-offset-2,
    footer .xlarge-offset-2 {
      margin-left: 16.66667%; }
    header .xlarge-4,
    footer .xlarge-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    header .xlarge-offset-3,
    footer .xlarge-offset-3 {
      margin-left: 25%; }
    header .xlarge-5,
    footer .xlarge-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    header .xlarge-offset-4,
    footer .xlarge-offset-4 {
      margin-left: 33.33333%; }
    header .xlarge-6,
    footer .xlarge-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    header .xlarge-offset-5,
    footer .xlarge-offset-5 {
      margin-left: 41.66667%; }
    header .xlarge-7,
    footer .xlarge-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    header .xlarge-offset-6,
    footer .xlarge-offset-6 {
      margin-left: 50%; }
    header .xlarge-8,
    footer .xlarge-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    header .xlarge-offset-7,
    footer .xlarge-offset-7 {
      margin-left: 58.33333%; }
    header .xlarge-9,
    footer .xlarge-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    header .xlarge-offset-8,
    footer .xlarge-offset-8 {
      margin-left: 66.66667%; }
    header .xlarge-10,
    footer .xlarge-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    header .xlarge-offset-9,
    footer .xlarge-offset-9 {
      margin-left: 75%; }
    header .xlarge-11,
    footer .xlarge-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    header .xlarge-offset-10,
    footer .xlarge-offset-10 {
      margin-left: 83.33333%; }
    header .xlarge-12,
    footer .xlarge-12 {
      flex: 0 0 100%;
      max-width: 100%; }
    header .xlarge-offset-11,
    footer .xlarge-offset-11 {
      margin-left: 91.66667%; }
    header .xlarge-up-1,
    footer .xlarge-up-1 {
      flex-wrap: wrap; }
      header .xlarge-up-1 > .column, header .xlarge-up-1 > .columns,
      header footer .xlarge-up-1 > .columns,
      footer .xlarge-up-1 > .column,
      footer header .xlarge-up-1 > .columns,
      footer .xlarge-up-1 > .columns {
        flex: 0 0 100%;
        max-width: 100%; }
    header .xlarge-up-2,
    footer .xlarge-up-2 {
      flex-wrap: wrap; }
      header .xlarge-up-2 > .column, header .xlarge-up-2 > .columns,
      header footer .xlarge-up-2 > .columns,
      footer .xlarge-up-2 > .column,
      footer header .xlarge-up-2 > .columns,
      footer .xlarge-up-2 > .columns {
        flex: 0 0 50%;
        max-width: 50%; }
    header .xlarge-up-3,
    footer .xlarge-up-3 {
      flex-wrap: wrap; }
      header .xlarge-up-3 > .column, header .xlarge-up-3 > .columns,
      header footer .xlarge-up-3 > .columns,
      footer .xlarge-up-3 > .column,
      footer header .xlarge-up-3 > .columns,
      footer .xlarge-up-3 > .columns {
        flex: 0 0 33.33333%;
        max-width: 33.33333%; }
    header .xlarge-up-4,
    footer .xlarge-up-4 {
      flex-wrap: wrap; }
      header .xlarge-up-4 > .column, header .xlarge-up-4 > .columns,
      header footer .xlarge-up-4 > .columns,
      footer .xlarge-up-4 > .column,
      footer header .xlarge-up-4 > .columns,
      footer .xlarge-up-4 > .columns {
        flex: 0 0 25%;
        max-width: 25%; }
    header .xlarge-up-5,
    footer .xlarge-up-5 {
      flex-wrap: wrap; }
      header .xlarge-up-5 > .column, header .xlarge-up-5 > .columns,
      header footer .xlarge-up-5 > .columns,
      footer .xlarge-up-5 > .column,
      footer header .xlarge-up-5 > .columns,
      footer .xlarge-up-5 > .columns {
        flex: 0 0 20%;
        max-width: 20%; }
    header .xlarge-up-6,
    footer .xlarge-up-6 {
      flex-wrap: wrap; }
      header .xlarge-up-6 > .column, header .xlarge-up-6 > .columns,
      header footer .xlarge-up-6 > .columns,
      footer .xlarge-up-6 > .column,
      footer header .xlarge-up-6 > .columns,
      footer .xlarge-up-6 > .columns {
        flex: 0 0 16.66667%;
        max-width: 16.66667%; }
    header .xlarge-up-7,
    footer .xlarge-up-7 {
      flex-wrap: wrap; }
      header .xlarge-up-7 > .column, header .xlarge-up-7 > .columns,
      header footer .xlarge-up-7 > .columns,
      footer .xlarge-up-7 > .column,
      footer header .xlarge-up-7 > .columns,
      footer .xlarge-up-7 > .columns {
        flex: 0 0 14.28571%;
        max-width: 14.28571%; }
    header .xlarge-up-8,
    footer .xlarge-up-8 {
      flex-wrap: wrap; }
      header .xlarge-up-8 > .column, header .xlarge-up-8 > .columns,
      header footer .xlarge-up-8 > .columns,
      footer .xlarge-up-8 > .column,
      footer header .xlarge-up-8 > .columns,
      footer .xlarge-up-8 > .columns {
        flex: 0 0 12.5%;
        max-width: 12.5%; } }

@media screen and (min-width: 76.5625rem) and (min-width: 76.5625rem) {
  header .xlarge-expand,
  footer .xlarge-expand {
    flex: 1 1 0px; } }

.row.xlarge-unstack > .column, header .row.xlarge-unstack > .columns,
footer .row.xlarge-unstack > .columns {
  flex: 0 0 100%; }
  @media screen and (min-width: 76.5625rem) {
    .row.xlarge-unstack > .column, header .row.xlarge-unstack > .columns,
    footer .row.xlarge-unstack > .columns {
      flex: 1 1 0px; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-collapse > .column, header .xlarge-collapse > .columns,
    header footer .xlarge-collapse > .columns,
    footer .xlarge-collapse > .column,
    footer header .xlarge-collapse > .columns,
    footer .xlarge-collapse > .columns {
      padding-right: 0;
      padding-left: 0; }
    header .xlarge-uncollapse > .column, header .xlarge-uncollapse > .columns,
    header footer .xlarge-uncollapse > .columns,
    footer .xlarge-uncollapse > .column,
    footer header .xlarge-uncollapse > .columns,
    footer .xlarge-uncollapse > .columns {
      padding-right: 0.75rem;
      padding-left: 0.75rem; } }
  header .shrink,
  footer .shrink {
    flex: 0 0 auto;
    max-width: 100%; }
  header .column-block,
  footer .column-block {
    margin-bottom: 0.75rem; }
    header .column-block > :last-child,
    footer .column-block > :last-child {
      margin-bottom: 0; }
    @media screen and (min-width: 46rem) {
      header .column-block,
      footer .column-block {
        margin-bottom: 1.5rem; }
        header .column-block > :last-child,
        footer .column-block > :last-child {
          margin-bottom: 0; } }
    @media screen and (min-width: 63.9375rem) {
      header .column-block,
      footer .column-block {
        margin-bottom: 1.5rem; }
        header .column-block > :last-child,
        footer .column-block > :last-child {
          margin-bottom: 0; } }
  header div,
  header dl,
  header dt,
  header dd,
  header ul,
  header ol,
  header li,
  header h1,
  header h2,
  header h3,
  header h4,
  header h5,
  header h6,
  header pre,
  header form,
  header p,
  header blockquote,
  header th,
  header td,
  footer div,
  footer dl,
  footer dt,
  footer dd,
  footer ul,
  footer ol,
  footer li,
  footer h1,
  footer h2,
  footer h3,
  footer h4,
  footer h5,
  footer h6,
  footer pre,
  footer form,
  footer p,
  footer blockquote,
  footer th,
  footer td {
    margin: 0;
    padding: 0; }
  header p,
  footer p {
    margin-bottom: 1rem;
    font-size: inherit;
    line-height: 1.4;
    text-rendering: optimizeLegibility; }
  header em,
  header i,
  footer em,
  footer i {
    font-style: italic;
    line-height: inherit; }
  header strong,
  header b,
  footer strong,
  footer b {
    font-weight: bold;
    line-height: inherit; }
  header small,
  footer small {
    font-size: 0.75rem;
    line-height: inherit; }
  header h1, header .h1,
  header h2, header .h2,
  header h3, header .h3,
  header h4, header .h4,
  header h5, header .h5,
  header h6, header .h6,
  footer h1,
  footer .h1,
  footer h2,
  footer .h2,
  footer h3,
  footer .h3,
  footer h4,
  footer .h4,
  footer h5,
  footer .h5,
  footer h6,
  footer .h6 {
    font-family: "Heebo", sans-serif;
    font-style: normal;
    font-weight: 300;
    color: inherit;
    text-rendering: optimizeLegibility; }
    header h1 small, header .h1 small,
    header h2 small, header .h2 small,
    header h3 small, header .h3 small,
    header h4 small, header .h4 small,
    header h5 small, header .h5 small,
    header h6 small, header .h6 small,
    footer h1 small,
    footer .h1 small,
    footer h2 small,
    footer .h2 small,
    footer h3 small,
    footer .h3 small,
    footer h4 small,
    footer .h4 small,
    footer h5 small,
    footer .h5 small,
    footer h6 small,
    footer .h6 small {
      line-height: 0;
      color: #cacaca; }
  header h1, header .h1,
  footer h1,
  footer .h1 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0; }
  header h2, header .h2,
  footer h2,
  footer .h2 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0; }
  header h3, header .h3,
  footer h3,
  footer .h3 {
    font-size: 1.1875rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0; }
  header h4, header .h4,
  footer h4,
  footer .h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0; }
  header h5, header .h5,
  footer h5,
  footer .h5 {
    font-size: 1.0625rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0; }
  header h6, header .h6,
  footer h6,
  footer .h6 {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0; }
  @media screen and (min-width: 46rem) {
    header h1, header .h1,
    footer h1,
    footer .h1 {
      font-size: 3rem; }
    header h2, header .h2,
    footer h2,
    footer .h2 {
      font-size: 2.5rem; }
    header h3, header .h3,
    footer h3,
    footer .h3 {
      font-size: 1.9375rem; }
    header h4, header .h4,
    footer h4,
    footer .h4 {
      font-size: 1.5625rem; }
    header h5, header .h5,
    footer h5,
    footer .h5 {
      font-size: 1.25rem; }
    header h6, header .h6,
    footer h6,
    footer .h6 {
      font-size: 1rem; } }
  header a,
  footer a {
    line-height: inherit;
    color: #0075BE;
    text-decoration: none;
    cursor: pointer; }
    header a:hover, header a:focus,
    footer a:hover,
    footer a:focus {
      color: #005587;
      text-decoration: underline; }
    header a img,
    footer a img {
      border: 0; }
  header hr,
  footer hr {
    clear: both;
    max-width: 73.4rem;
    height: 0;
    margin: 1rem auto;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #cacaca;
    border-left: 0; }
  header ul,
  header ol,
  header dl,
  footer ul,
  footer ol,
  footer dl {
    margin-bottom: 0;
    list-style-position: outside;
    line-height: 1.4; }
  header li,
  footer li {
    font-size: inherit; }
  header ul,
  footer ul {
    margin-left: 0;
    list-style-type: disc; }
  header ol,
  footer ol {
    margin-left: 0; }
  header ul header ul, header ol header ul,
  footer ul header ul,
  footer ol header ul, header ul header ol, header ol header ol,
  footer ul header ol,
  footer ol header ol, header ul
  footer ul, header ol
  footer ul,
  footer ul
  footer ul,
  footer ol
  footer ul, header ul
  footer ol, header ol
  footer ol,
  footer ul
  footer ol,
  footer ol
  footer ol {
    margin-left: 1.25rem;
    margin-bottom: 0; }
  header dl,
  footer dl {
    margin-bottom: 1rem; }
    header dl dt,
    footer dl dt {
      margin-bottom: 0.3rem;
      font-weight: bold; }
  header blockquote,
  footer blockquote {
    margin: 0 0 1rem;
    padding: 0.5625rem 1.25rem 0 1.1875rem;
    border-left: 1px solid #cacaca; }
    header blockquote, header blockquote p,
    footer blockquote,
    footer blockquote p {
      line-height: 1.4;
      color: #001928; }
  header abbr, header abbr[title],
  footer abbr,
  footer abbr[title] {
    border-bottom: 1px dotted #0a0a0a;
    cursor: help;
    text-decoration: none; }
  header figure,
  footer figure {
    margin: 0; }
  header kbd,
  footer kbd {
    margin: 0;
    padding: 0.125rem 0.25rem 0;
    background-color: #e6e6e6;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    color: #0a0a0a; }
  header .subheader,
  footer .subheader {
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
    line-height: 1.4;
    color: #8a8a8a; }
  header .lead,
  footer .lead {
    font-size: 125%;
    line-height: 1.6; }
  header .stat,
  footer .stat {
    font-size: 2.5rem;
    line-height: 1; }
    p + header .stat, p +
    footer .stat {
      margin-top: -1rem; }
  header ul.no-bullet, header ol.no-bullet,
  footer ul.no-bullet,
  footer ol.no-bullet {
    margin-left: 0;
    list-style: none; }
  header .cite-block, header cite,
  header footer cite, footer header cite,
  footer .cite-block,
  footer header cite,
  header footer cite,
  footer cite {
    display: block;
    color: #8a8a8a;
    font-size: 0.8125rem; }
    header .cite-block:before, header cite:before,
    header footer cite:before, footer header cite:before,
    footer .cite-block:before,
    footer header cite:before,
    header footer cite:before,
    footer cite:before {
      content: "\2014   "; }
  header .code-inline, header code,
  header footer code, footer header code,
  footer .code-inline,
  footer header code,
  header footer code,
  footer code {
    border: 1px solid #cacaca;
    background-color: #e6e6e6;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    font-weight: normal;
    color: #0a0a0a;
    display: inline;
    max-width: 100%;
    word-wrap: break-word;
    padding: 0.125rem 0.3125rem 0.0625rem; }
  header .code-block,
  footer .code-block {
    border: 1px solid #cacaca;
    background-color: #e6e6e6;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    font-weight: normal;
    color: #0a0a0a;
    display: block;
    overflow: auto;
    white-space: pre;
    padding: 1rem;
    margin-bottom: 1.5rem; }
  header .text-left,
  footer .text-left {
    text-align: left; }
  header .text-right,
  footer .text-right {
    text-align: right; }
  header .text-center,
  footer .text-center {
    text-align: center; }
  header .text-justify,
  footer .text-justify {
    text-align: justify; }
  @media screen and (min-width: 46rem) {
    header .medium-text-left,
    footer .medium-text-left {
      text-align: left; }
    header .medium-text-right,
    footer .medium-text-right {
      text-align: right; }
    header .medium-text-center,
    footer .medium-text-center {
      text-align: center; }
    header .medium-text-justify,
    footer .medium-text-justify {
      text-align: justify; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-text-left,
    footer .large-text-left {
      text-align: left; }
    header .large-text-right,
    footer .large-text-right {
      text-align: right; }
    header .large-text-center,
    footer .large-text-center {
      text-align: center; }
    header .large-text-justify,
    footer .large-text-justify {
      text-align: justify; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-text-left,
    footer .xlarge-text-left {
      text-align: left; }
    header .xlarge-text-right,
    footer .xlarge-text-right {
      text-align: right; }
    header .xlarge-text-center,
    footer .xlarge-text-center {
      text-align: center; }
    header .xlarge-text-justify,
    footer .xlarge-text-justify {
      text-align: justify; } }
  header .show-for-print,
  footer .show-for-print {
    display: none !important; }
  @media print {
    header *,
    footer * {
      background: transparent !important;
      color: black !important;
      color-adjust: economy;
      box-shadow: none !important;
      text-shadow: none !important; }
    header .show-for-print,
    footer .show-for-print {
      display: block !important; }
    header .hide-for-print,
    footer .hide-for-print {
      display: none !important; }
    header table.show-for-print,
    footer table.show-for-print {
      display: table !important; }
    header thead.show-for-print,
    footer thead.show-for-print {
      display: table-header-group !important; }
    header tbody.show-for-print,
    footer tbody.show-for-print {
      display: table-row-group !important; }
    header tr.show-for-print,
    footer tr.show-for-print {
      display: table-row !important; }
    header td.show-for-print,
    footer td.show-for-print {
      display: table-cell !important; }
    header th.show-for-print,
    footer th.show-for-print {
      display: table-cell !important; }
    header a,
    header a:visited,
    footer a,
    footer a:visited {
      text-decoration: underline; }
    header a[href]:after,
    footer a[href]:after {
      content: " (" attr(href) ")"; }
    header .ir a:after,
    header a[href^='javascript:']:after,
    header a[href^='#']:after,
    footer .ir a:after,
    footer a[href^='javascript:']:after,
    footer a[href^='#']:after {
      content: ''; }
    header abbr[title]:after,
    footer abbr[title]:after {
      content: " (" attr(title) ")"; }
    header pre,
    header blockquote,
    footer pre,
    footer blockquote {
      border: 1px solid #646c76;
      page-break-inside: avoid; }
    header thead,
    footer thead {
      display: table-header-group; }
    header tr,
    header img,
    footer tr,
    footer img {
      page-break-inside: avoid; }
    header img,
    footer img {
      max-width: 100% !important; }
    @page {
      header,
      footer {
        margin: 0.5cm; } }
    header p,
    header h2,
    header h3,
    footer p,
    footer h2,
    footer h3 {
      orphans: 3;
      widows: 3; }
    header h2,
    header h3,
    footer h2,
    footer h3 {
      page-break-after: avoid; }
    header .print-break-inside,
    footer .print-break-inside {
      page-break-inside: auto; } }
  header [type='text'], header [type='password'], header [type='date'], header [type='datetime'], header [type='datetime-local'], header [type='month'], header [type='week'], header [type='email'], header [type='number'], header [type='search'], header [type='tel'], header [type='time'], header [type='url'], header [type='color'],
  header textarea,
  footer [type='text'],
  footer [type='password'],
  footer [type='date'],
  footer [type='datetime'],
  footer [type='datetime-local'],
  footer [type='month'],
  footer [type='week'],
  footer [type='email'],
  footer [type='number'],
  footer [type='search'],
  footer [type='tel'],
  footer [type='time'],
  footer [type='url'],
  footer [type='color'],
  footer textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.4375rem;
    margin: 0 0 1rem;
    padding: 0.5rem;
    border: 0.0625rem solid #929ba9;
    border-radius: 0;
    background-color: #fefefe;
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: #0a0a0a;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    appearance: none; }
    header [type='text']:focus, header [type='password']:focus, header [type='date']:focus, header [type='datetime']:focus, header [type='datetime-local']:focus, header [type='month']:focus, header [type='week']:focus, header [type='email']:focus, header [type='number']:focus, header [type='search']:focus, header [type='tel']:focus, header [type='time']:focus, header [type='url']:focus, header [type='color']:focus,
    header textarea:focus,
    footer [type='text']:focus,
    footer [type='password']:focus,
    footer [type='date']:focus,
    footer [type='datetime']:focus,
    footer [type='datetime-local']:focus,
    footer [type='month']:focus,
    footer [type='week']:focus,
    footer [type='email']:focus,
    footer [type='number']:focus,
    footer [type='search']:focus,
    footer [type='tel']:focus,
    footer [type='time']:focus,
    footer [type='url']:focus,
    footer [type='color']:focus,
    footer textarea:focus {
      outline: none;
      border: 1px solid #8a8a8a;
      background-color: #fefefe;
      box-shadow: 0 0 5px #cacaca;
      transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
  header textarea,
  footer textarea {
    max-width: 100%; }
    header textarea[rows],
    footer textarea[rows] {
      height: auto; }
  header input:disabled, header input[readonly],
  header textarea:disabled,
  header textarea[readonly],
  footer input:disabled,
  footer input[readonly],
  footer textarea:disabled,
  footer textarea[readonly] {
    background-color: #e6e6e6;
    cursor: not-allowed; }
  header [type='submit'],
  header [type='button'],
  footer [type='submit'],
  footer [type='button'] {
    appearance: none;
    border-radius: 0; }
  header input[type='search'],
  footer input[type='search'] {
    box-sizing: border-box; }
  header ::placeholder,
  footer ::placeholder {
    color: #cacaca; }
  header [type='file'],
  header [type='checkbox'],
  header [type='radio'],
  footer [type='file'],
  footer [type='checkbox'],
  footer [type='radio'] {
    margin: 0 0 1rem; }
  header [type='checkbox'] + label,
  header [type='radio'] + label,
  footer [type='checkbox'] + label,
  footer [type='radio'] + label {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 0.5rem;
    margin-right: 1rem;
    margin-bottom: 0; }
    header [type='checkbox'] + label[for],
    header [type='radio'] + label[for],
    footer [type='checkbox'] + label[for],
    footer [type='radio'] + label[for] {
      cursor: pointer; }
  header label > [type='checkbox'],
  header label > [type='radio'],
  footer label > [type='checkbox'],
  footer label > [type='radio'] {
    margin-right: 0.5rem; }
  header [type='file'],
  footer [type='file'] {
    width: 100%; }
  header label,
  footer label {
    display: block;
    margin: 0;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.8;
    color: #0a0a0a; }
    header label.middle,
    footer label.middle {
      margin: 0 0 1rem;
      padding: 0.5625rem 0; }
  header .help-text,
  footer .help-text {
    margin-top: -0.5rem;
    font-size: 0.8125rem;
    font-style: italic;
    color: #0a0a0a; }
  header .input-group,
  footer .input-group {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
    align-items: stretch; }
    header .input-group > :first-child, header .input-group > :first-child.input-group-button > *,
    footer .input-group > :first-child,
    footer .input-group > :first-child.input-group-button > * {
      border-radius: 0 0 0 0; }
    header .input-group > :last-child, header .input-group > :last-child.input-group-button > *,
    footer .input-group > :last-child,
    footer .input-group > :last-child.input-group-button > * {
      border-radius: 0 0 0 0; }
  header .input-group-label, header .input-group-field, header .input-group-button, header .input-group-button a,
  header .input-group-button input,
  header .input-group-button button,
  header .input-group-button label, footer .input-group-button header a, footer .input-group-button header input, footer .input-group-button header button, footer .input-group-button header label,
  footer .input-group-label,
  footer .input-group-field,
  footer .input-group-button,
  header .input-group-button footer a,
  header .input-group-button footer input,
  header .input-group-button footer button,
  header .input-group-button footer label,
  footer .input-group-button a,
  footer .input-group-button input,
  footer .input-group-button button,
  footer .input-group-button label {
    margin: 0;
    white-space: nowrap; }
  header .input-group-label,
  footer .input-group-label {
    padding: 0 1rem;
    border: 1px solid #cacaca;
    background: #e6e6e6;
    color: #0a0a0a;
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex: 0 0 auto;
    align-items: center; }
    header .input-group-label:first-child,
    footer .input-group-label:first-child {
      border-right: 0; }
    header .input-group-label:last-child,
    footer .input-group-label:last-child {
      border-left: 0; }
  header .input-group-field,
  footer .input-group-field {
    border-radius: 0;
    flex: 1 1 0px;
    min-width: 0; }
  header .input-group-button,
  footer .input-group-button {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    display: flex;
    flex: 0 0 auto; }
    header .input-group-button a,
    header .input-group-button input,
    header .input-group-button button,
    header .input-group-button label,
    footer .input-group-button a,
    footer .input-group-button input,
    footer .input-group-button button,
    footer .input-group-button label {
      align-self: stretch;
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
      font-size: 1rem; }
  header fieldset,
  footer fieldset {
    margin: 0;
    padding: 0;
    border: 0; }
  header legend,
  footer legend {
    max-width: 100%;
    margin-bottom: 0.5rem; }
  header .fieldset,
  footer .fieldset {
    margin: 1.125rem 0;
    padding: 1.25rem;
    border: 1px solid #cacaca; }
    header .fieldset legend,
    footer .fieldset legend {
      margin: 0;
      margin-left: -0.1875rem;
      padding: 0 0.1875rem; }
  header select,
  footer select {
    height: 2.4375rem;
    margin: 0 0 1rem;
    padding: 0.5rem;
    appearance: none;
    border: 0.0625rem solid #929ba9;
    border-radius: 0;
    background-color: #fefefe;
    font-family: inherit;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: #0a0a0a;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
    background-origin: content-box;
    background-position: right -1rem center;
    background-repeat: no-repeat;
    background-size: 9px 6px;
    padding-right: 1.5rem;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
    @media screen and (min-width: 0\0) {
      header select,
      footer select {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } }
    header select:focus,
    footer select:focus {
      outline: none;
      border: 1px solid #8a8a8a;
      background-color: #fefefe;
      box-shadow: 0 0 5px #cacaca;
      transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }
    header select:disabled,
    footer select:disabled {
      background-color: #e6e6e6;
      cursor: not-allowed; }
    header select::-ms-expand,
    footer select::-ms-expand {
      display: none; }
    header select[multiple],
    footer select[multiple] {
      height: auto;
      background-image: none; }
    header select:not([multiple]),
    footer select:not([multiple]) {
      padding-top: 0;
      padding-bottom: 0; }
  header .is-invalid-input:not(:focus),
  footer .is-invalid-input:not(:focus) {
    border-color: #cc4b37;
    background-color: #f9ecea; }
    header .is-invalid-input:not(:focus)::placeholder,
    footer .is-invalid-input:not(:focus)::placeholder {
      color: #cc4b37; }
  header .is-invalid-label,
  footer .is-invalid-label {
    color: #cc4b37; }
  header .form-error,
  footer .form-error {
    display: none;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #cc4b37; }
    header .form-error.is-visible,
    footer .form-error.is-visible {
      display: block; }
  header .close-button,
  footer .close-button {
    position: absolute;
    z-index: 10;
    color: #8a8a8a;
    cursor: pointer; }
    [data-whatinput='mouse'] header .close-button, [data-whatinput='mouse']
    footer .close-button {
      outline: 0; }
    header .close-button:hover, header .close-button:focus,
    footer .close-button:hover,
    footer .close-button:focus {
      color: #0a0a0a; }
    header .close-button.small,
    footer .close-button.small {
      right: 0.66rem;
      top: 0.33em;
      font-size: 1.5em;
      line-height: 1; }
    header .close-button.medium,
    footer .close-button.medium, header .close-button,
    footer .close-button {
      right: 1rem;
      top: 0.5rem;
      font-size: 2em;
      line-height: 1; }
  header html.is-reveal-open,
  footer html.is-reveal-open {
    position: fixed;
    width: 100%;
    overflow-y: hidden; }
    header html.is-reveal-open.zf-has-scroll,
    footer html.is-reveal-open.zf-has-scroll {
      overflow-y: scroll; }
    header html.is-reveal-open body,
    footer html.is-reveal-open body {
      overflow-y: hidden; }
  header .reveal-overlay,
  footer .reveal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1005;
    display: none;
    background-color: rgba(0, 25, 40, 0.1);
    overflow-y: auto; }
  header .reveal,
  footer .reveal {
    z-index: 1006;
    backface-visibility: hidden;
    display: none;
    padding: 1rem;
    border: 1px solid #cacaca;
    border-radius: 0;
    background-color: #fefefe;
    position: relative;
    top: 100px;
    margin-right: auto;
    margin-left: auto;
    overflow-y: auto; }
    [data-whatinput='mouse'] header .reveal, [data-whatinput='mouse']
    footer .reveal {
      outline: 0; }
    @media screen and (min-width: 46rem) {
      header .reveal,
      footer .reveal {
        min-height: 0; } }
    header .reveal .column, header .reveal .columns,
    footer .reveal .column,
    footer .reveal .columns {
      min-width: 0; }
    header .reveal > :last-child,
    footer .reveal > :last-child {
      margin-bottom: 0; }
    @media screen and (min-width: 46rem) {
      header .reveal,
      footer .reveal {
        width: 600px;
        max-width: 75rem; } }
    header .reveal.collapse,
    footer .reveal.collapse {
      padding: 0; }
    @media screen and (min-width: 46rem) {
      header .reveal.tiny,
      footer .reveal.tiny {
        width: 30%;
        max-width: 75rem; } }
    @media screen and (min-width: 46rem) {
      header .reveal.small,
      footer .reveal.small {
        width: 50%;
        max-width: 75rem; } }
    @media screen and (min-width: 46rem) {
      header .reveal.large,
      footer .reveal.large {
        width: 90%;
        max-width: 75rem; } }
    header .reveal.full,
    footer .reveal.full {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      max-width: none;
      height: 100%;
      min-height: 100%;
      margin-left: 0;
      border: 0;
      border-radius: 0; }
    @media screen and (max-width: 45.9375rem) {
      header .reveal,
      footer .reveal {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100%;
        margin-left: 0;
        border: 0;
        border-radius: 0; } }
    header .reveal.without-overlay,
    footer .reveal.without-overlay {
      position: fixed; }
  header .hide,
  footer .hide {
    display: none !important; }
  header .invisible,
  footer .invisible {
    visibility: hidden; }
  @media screen and (max-width: 45.9375rem) {
    header .hide-for-small-only,
    footer .hide-for-small-only {
      display: none !important; } }
  @media screen and (max-width: 0em), screen and (min-width: 46em) {
    header .show-for-small-only,
    footer .show-for-small-only {
      display: none !important; } }
  @media screen and (min-width: 46rem) {
    header .hide-for-medium,
    footer .hide-for-medium {
      display: none !important; } }
  header .show-for-medium,
  footer .show-for-medium {
    display: none !important; }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .hide-for-medium-only,
    footer .hide-for-medium-only {
      display: none !important; } }
  @media screen and (max-width: 45.99875em), screen and (min-width: 63.9375em) {
    header .show-for-medium-only,
    footer .show-for-medium-only {
      display: none !important; } }
  @media screen and (min-width: 63.9375rem) {
    header .hide-for-large,
    footer .hide-for-large {
      display: none !important; } }
  header .show-for-large,
  footer .show-for-large {
    display: none !important; }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .hide-for-large-only,
    footer .hide-for-large-only {
      display: none !important; } }
  @media screen and (max-width: 63.93625em), screen and (min-width: 76.5625em) {
    header .show-for-large-only,
    footer .show-for-large-only {
      display: none !important; } }
  @media screen and (min-width: 76.5625rem) {
    header .hide-for-xlarge,
    footer .hide-for-xlarge {
      display: none !important; } }
  header .show-for-xlarge,
  footer .show-for-xlarge {
    display: none !important; }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .hide-for-xlarge-only,
    footer .hide-for-xlarge-only {
      display: none !important; } }
  @media screen and (max-width: 76.56125em), screen and (min-width: 90em) {
    header .show-for-xlarge-only,
    footer .show-for-xlarge-only {
      display: none !important; } }
  header .show-for-sr,
  header .show-on-focus,
  footer .show-for-sr,
  footer .show-on-focus {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important; }
  header .show-on-focus:active, header .show-on-focus:focus,
  footer .show-on-focus:active,
  footer .show-on-focus:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important; }
  header .show-for-landscape,
  header .hide-for-portrait,
  footer .show-for-landscape,
  footer .hide-for-portrait {
    display: block !important; }
    @media screen and (orientation: landscape) {
      header .show-for-landscape,
      header .hide-for-portrait,
      footer .show-for-landscape,
      footer .hide-for-portrait {
        display: block !important; } }
    @media screen and (orientation: portrait) {
      header .show-for-landscape,
      header .hide-for-portrait,
      footer .show-for-landscape,
      footer .hide-for-portrait {
        display: none !important; } }
  header .hide-for-landscape,
  header .show-for-portrait,
  footer .hide-for-landscape,
  footer .show-for-portrait {
    display: none !important; }
    @media screen and (orientation: landscape) {
      header .hide-for-landscape,
      header .show-for-portrait,
      footer .hide-for-landscape,
      footer .show-for-portrait {
        display: none !important; } }
    @media screen and (orientation: portrait) {
      header .hide-for-landscape,
      header .show-for-portrait,
      footer .hide-for-landscape,
      footer .show-for-portrait {
        display: block !important; } }
  header .align-center,
  footer .align-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
  header .align-spaced,
  footer .align-spaced {
    justify-content: space-around; }
  header strong,
  footer strong {
    font-weight: 700; }
  header h1,
  footer h1 {
    font-size: 1.875rem; }
  header h2,
  footer h2 {
    font-size: 1.62469rem; }
  header h3,
  footer h3 {
    font-size: 1.37437rem; }
  header h4,
  footer h4 {
    font-size: 1.125rem; }
  header h5,
  footer h5 {
    font-size: 0.99938rem; }
  header h6,
  footer h6 {
    font-size: 0.99938rem; }
  @media screen and (min-width: 46em) {
    header h1,
    footer h1 {
      font-size: 2rem; }
    header h3,
    footer h3 {
      font-size: 1.24969rem; }
    header h4,
    footer h4 {
      font-size: 1.06219rem; }
    header h5,
    footer h5 {
      font-size: 0.9375rem; }
    header h6,
    footer h6 {
      font-size: 0.9375rem; } }
  header .align-top.columns,
  header .column.align-top,
  header .align-top.columns,
  footer .align-top.columns,
  footer .column.align-top,
  footer .align-top.columns {
    -ms-flex-item-align: start;
    align-self: flex-start; }
  header html,
  header body,
  footer html,
  footer body {
    height: 100%; }
  header body,
  footer body {
    display: flex;
    flex-direction: column;
    background-color: #FEFEFE; }
  header footer,
  footer footer {
    flex-shrink: 0; }
  header body.is-reveal-open,
  footer body.is-reveal-open {
    overflow-y: hidden; }
  header .margin-center,
  footer .margin-center {
    margin-left: auto;
    margin-right: auto; }
  header .trio-logo-container-height,
  footer .trio-logo-container-height {
    height: 8em; }
    @media screen and (max-width: 45.9375rem) {
      header .trio-logo-container-height,
      footer .trio-logo-container-height {
        height: 4em; } }
  header .secondary-header,
  footer .secondary-header {
    /**
        * Wraps the secondary header.
        */
    /**
        * The secondary-header toggle is the button that controls the opening and closing of the header.
        */
    /**
        * The close button is located inside the secondary nav.
        * 1. Hide the close button, otherwise it sits above the open button even when closed.
        * 2. Set the transition delay to the same amount of time it takes for the menu to open.
        *     This will cause the close button to dissapear as soon as the menu is closed.
        */
    /**
        * The secondary nav logo is on the inside of the blue on mobile and outside on tablet / desktop.
        *
        * 1. The image size does not reflect the design, until we get the correct image this needs to stay.
        */ }
    @media screen and (min-width: 46rem) {
      header .secondary-header,
      footer .secondary-header {
        position: relative;
        border-bottom: 0.0625rem solid #929ba9; } }
    header .secondary-header__wrapper,
    footer .secondary-header__wrapper {
      position: absolute;
      max-width: 75rem;
      margin-right: auto;
      margin-left: auto;
      top: 0;
      left: 0;
      width: calc(100% - 5rem);
      /* 1 */
      min-width: 18em;
      background: #0075BE;
      transition: transform 0.3s ease-in-out;
      transform: translate(-101%, 0);
      /**
            * 1. When the secondary header is open display it.
            */
      /**
        * Should be always open on tablet up.
        */ }
      .secondary-header.is-open > header .secondary-header__wrapper,
      .no-js .secondary-header__toggle:hover ~ .secondary-header > header .secondary-header__wrapper,
      .no-js .secondary-header:hover > header .secondary-header__wrapper, .secondary-header.is-open >
      footer .secondary-header__wrapper,
      .no-js .secondary-header__toggle:hover ~ .secondary-header >
      footer .secondary-header__wrapper,
      .no-js .secondary-header:hover >
      footer .secondary-header__wrapper {
        transform: none;
        /* 1 */ }
      @media screen and (min-width: 46rem) {
        header .secondary-header__wrapper,
        footer .secondary-header__wrapper {
          display: block;
          position: static;
          width: 100%;
          justify-content: center;
          align-items: center;
          background-color: #FEFEFE;
          transform: none; } }
      @media screen and (min-width: 63.9375rem) {
        header .secondary-header__wrapper,
        footer .secondary-header__wrapper {
          display: flex;
          justify-content: space-between; } }
    header .secondary-header__toggle,
    footer .secondary-header__toggle {
      display: flex;
      width: 5rem;
      height: 5rem;
      justify-content: center;
      align-items: center;
      background-color: #0075BE;
      /**
            * Remove default anchor styles.
            */
      /**
        * Hide the toggle since the menu is only closed in mobile.
        */ }
      header .secondary-header__toggle, header .secondary-header__toggle:hover, header .secondary-header__toggle:focus,
      footer .secondary-header__toggle,
      footer .secondary-header__toggle:hover,
      footer .secondary-header__toggle:focus {
        color: #FEFEFE;
        text-decoration: none; }
      @media screen and (min-width: 46rem) {
        header .secondary-header__toggle,
        footer .secondary-header__toggle {
          display: none; } }
    header .secondary-header__close,
    footer .secondary-header__close {
      position: absolute;
      top: 0;
      left: 100%;
      transform: scale(0);
      /* 1 */
      transition: 0ms transform linear 0.3s;
      /* 2 */
      /**
            * 1. Display the close button when the header is open.
            *     The opening animation takes 300ms this is instant so we cant tell the difference
            * 2. Remove the transition since we want the close button to appear INSTANTLY when the menu opens.
            */ }
      .secondary-header.is-open header .secondary-header__close, .secondary-header.is-open
      footer .secondary-header__close {
        transform: none;
        /* 1 */
        transition: none;
        /* 2 */ }
    header .secondary-header__logo,
    footer .secondary-header__logo {
      display: block;
      padding-top: 1.5em;
      padding-right: 2em;
      padding-bottom: 1.5em;
      padding-left: 2em;
      width: 18em;
      /**
            * ie11 doesnt adhere to the max-width: 100% on all img tags.
            * This browserhack targets ie11 specifically.
            * TODO: Find better solution
            */
      /* stylelint-disable selector-no-universal */
      /* disable stylelint since this is a browserhack. */
      /* stylelint-enable selector-no-universal */
      /**
            * 1. Align the logo with the Choose site text
            */ }
      header .secondary-header__logo *::-ms-backdrop,
      header .secondary-header__logo img,
      footer .secondary-header__logo *::-ms-backdrop,
      footer .secondary-header__logo img {
        max-width: 18em; }
      @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
        header .secondary-header__logo,
        footer .secondary-header__logo {
          margin-left: auto;
          margin-right: auto; } }
      @media screen and (min-width: 63.9375rem) {
        header .secondary-header__logo,
        footer .secondary-header__logo {
          padding-top: 0;
          padding-bottom: 0;
          padding-left: 1em;
          /* 1 */ } }
  header .primary-header,
  footer .primary-header {
    display: flex;
    align-items: center;
    flex: 1;
    /* 1 */
    justify-content: center;
    /**
        * 1. Serve as anchor for medium screens.
        */
    /**
    * Wraps the primary header.
    */
    /**
        * The primary menu logo.
        * 1. Its usually an anchor so set the display correctly.
        * 2. Logo is the only thing on the left.
        */
    /**
    * Root level links in the primary header are what give the header the correct size.
    */ }
    @media screen and (min-width: 46rem) {
      header .primary-header,
      footer .primary-header {
        position: relative;
        background-color: #0075BE; } }
    header .primary-header__wrapper,
    footer .primary-header__wrapper {
      display: flex;
      flex: 1;
      max-width: 75rem;
      align-items: center; }
      @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
        header .primary-header__wrapper,
        footer .primary-header__wrapper {
          justify-content: space-between; } }
      @media screen and (min-width: 63.9375rem) {
        header .primary-header__wrapper,
        footer .primary-header__wrapper {
          flex: 1 1 75rem; } }
    header .primary-header__logo,
    footer .primary-header__logo {
      display: block;
      /* 1 */
      margin-right: auto;
      /* 2 */
      max-width: 5em;
      /**
            * Logo only appears on mobile.
            */ }
      @media screen and (min-width: 46rem) {
        header .primary-header__logo,
        footer .primary-header__logo {
          display: none; } }
  @media screen and (min-width: 46rem) {
    header .logo-constraint,
    footer .logo-constraint {
      height: 2.1rem; } }
  header .block,
  header .is-open,
  footer .block,
  footer .is-open {
    display: block !important; }
  @media screen and (min-width: 46rem) {
    header .medium-size-h2,
    footer .medium-size-h2 {
      font-size: 1.62469rem; } }
  header .tv-font-xxlarge,
  footer .tv-font-xxlarge {
    font-size: 1.75rem;
    line-height: 2rem;
    letter-spacing: -0.0125rem; }
  header .weight-bold,
  footer .weight-bold {
    font-weight: 700; }
  header .weight-light,
  footer .weight-light {
    font-weight: 300; }
  header .padding--large,
  footer .padding--large {
    padding: 2em; }
  header .spacing-bottom,
  footer .spacing-bottom {
    margin-bottom: 1em; }
  header .spacing-bottom--large,
  footer .spacing-bottom--large {
    margin-bottom: 2em; }
  header .spacing-bottom--small,
  footer .spacing-bottom--small {
    margin-bottom: 0.5em; }
  header .spacing-top--large,
  footer .spacing-top--large {
    margin-top: 2em; }
  header .spacing-top--small,
  footer .spacing-top--small {
    margin-top: 0.5em; }
  header html.reveal-overflow-visible > body,
  footer html.reveal-overflow-visible > body {
    overflow: visible; }
  header .reveal-show,
  footer .reveal-show {
    display: block !important; }
  header .font-weight-400,
  footer .font-weight-400 {
    font-weight: 400; }
  header .font-weight-500,
  footer .font-weight-500 {
    font-weight: 500; }
  header .max-width-inherit,
  footer .max-width-inherit {
    max-width: inherit; }
  header .stroke,
  footer .stroke {
    padding: 1em;
    padding-top: 1em;
    position: relative;
    border: 0.125em solid #929ba9;
    border-color: #d9dce1;
    border-radius: 1em; }
    header .stroke--text,
    footer .stroke--text {
      position: absolute;
      transform: translate(-50%, -50%);
      display: inline-table;
      top: 0;
      left: 50%;
      background: #FEFEFE;
      padding-left: 0.5em;
      padding-right: 0.5em; }
    @media screen and (max-width: 45.9375rem) {
      header .stroke--mobile,
      footer .stroke--mobile {
        padding: 1em;
        padding-top: 1em;
        position: relative;
        border: 0.125em solid #929ba9;
        border-color: #d9dce1;
        border-radius: 1em; }
        header .stroke--mobile--text,
        footer .stroke--mobile--text {
          position: absolute;
          transform: translate(-50%, -50%);
          display: inline-table;
          top: 0;
          left: 50%;
          background: #FEFEFE;
          padding-left: 0.5em;
          padding-right: 0.5em; } }
    @media screen and (min-width: 46rem) {
      header .stroke--desktop,
      footer .stroke--desktop {
        padding: 1em;
        padding-top: 1em;
        position: relative;
        border: 0.125em solid #929ba9;
        border-color: #d9dce1;
        border-radius: 1em; }
        header .stroke--desktop--text,
        footer .stroke--desktop--text {
          position: absolute;
          transform: translate(-50%, -50%);
          display: inline-table;
          top: 0;
          left: 50%;
          background: #FEFEFE;
          padding-left: 0.5em;
          padding-right: 0.5em; } }
  header .uppercase,
  footer .uppercase {
    text-transform: uppercase; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-1,
    footer .small-only-order-1 {
      order: 1; } }
  header .small-order-1,
  footer .small-order-1 {
    order: 1; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-2,
    footer .small-only-order-2 {
      order: 2; } }
  header .small-order-2,
  footer .small-order-2 {
    order: 2; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-3,
    footer .small-only-order-3 {
      order: 3; } }
  header .small-order-3,
  footer .small-order-3 {
    order: 3; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-4,
    footer .small-only-order-4 {
      order: 4; } }
  header .small-order-4,
  footer .small-order-4 {
    order: 4; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-5,
    footer .small-only-order-5 {
      order: 5; } }
  header .small-order-5,
  footer .small-order-5 {
    order: 5; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-6,
    footer .small-only-order-6 {
      order: 6; } }
  header .small-order-6,
  footer .small-order-6 {
    order: 6; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-7,
    footer .small-only-order-7 {
      order: 7; } }
  header .small-order-7,
  footer .small-order-7 {
    order: 7; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-8,
    footer .small-only-order-8 {
      order: 8; } }
  header .small-order-8,
  footer .small-order-8 {
    order: 8; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-9,
    footer .small-only-order-9 {
      order: 9; } }
  header .small-order-9,
  footer .small-order-9 {
    order: 9; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-10,
    footer .small-only-order-10 {
      order: 10; } }
  header .small-order-10,
  footer .small-order-10 {
    order: 10; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-11,
    footer .small-only-order-11 {
      order: 11; } }
  header .small-order-11,
  footer .small-order-11 {
    order: 11; }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-order-12,
    footer .small-only-order-12 {
      order: 12; } }
  header .small-order-12,
  footer .small-order-12 {
    order: 12; }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-1,
    footer .medium-only-order-1 {
      order: 1; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-1,
    footer .medium-order-1 {
      order: 1; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-2,
    footer .medium-only-order-2 {
      order: 2; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-2,
    footer .medium-order-2 {
      order: 2; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-3,
    footer .medium-only-order-3 {
      order: 3; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-3,
    footer .medium-order-3 {
      order: 3; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-4,
    footer .medium-only-order-4 {
      order: 4; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-4,
    footer .medium-order-4 {
      order: 4; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-5,
    footer .medium-only-order-5 {
      order: 5; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-5,
    footer .medium-order-5 {
      order: 5; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-6,
    footer .medium-only-order-6 {
      order: 6; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-6,
    footer .medium-order-6 {
      order: 6; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-7,
    footer .medium-only-order-7 {
      order: 7; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-7,
    footer .medium-order-7 {
      order: 7; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-8,
    footer .medium-only-order-8 {
      order: 8; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-8,
    footer .medium-order-8 {
      order: 8; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-9,
    footer .medium-only-order-9 {
      order: 9; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-9,
    footer .medium-order-9 {
      order: 9; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-10,
    footer .medium-only-order-10 {
      order: 10; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-10,
    footer .medium-order-10 {
      order: 10; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-11,
    footer .medium-only-order-11 {
      order: 11; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-11,
    footer .medium-order-11 {
      order: 11; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-order-12,
    footer .medium-only-order-12 {
      order: 12; } }
  @media screen and (min-width: 46rem) {
    header .medium-order-12,
    footer .medium-order-12 {
      order: 12; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-1,
    footer .large-only-order-1 {
      order: 1; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-1,
    footer .large-order-1 {
      order: 1; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-2,
    footer .large-only-order-2 {
      order: 2; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-2,
    footer .large-order-2 {
      order: 2; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-3,
    footer .large-only-order-3 {
      order: 3; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-3,
    footer .large-order-3 {
      order: 3; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-4,
    footer .large-only-order-4 {
      order: 4; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-4,
    footer .large-order-4 {
      order: 4; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-5,
    footer .large-only-order-5 {
      order: 5; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-5,
    footer .large-order-5 {
      order: 5; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-6,
    footer .large-only-order-6 {
      order: 6; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-6,
    footer .large-order-6 {
      order: 6; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-7,
    footer .large-only-order-7 {
      order: 7; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-7,
    footer .large-order-7 {
      order: 7; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-8,
    footer .large-only-order-8 {
      order: 8; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-8,
    footer .large-order-8 {
      order: 8; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-9,
    footer .large-only-order-9 {
      order: 9; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-9,
    footer .large-order-9 {
      order: 9; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-10,
    footer .large-only-order-10 {
      order: 10; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-10,
    footer .large-order-10 {
      order: 10; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-11,
    footer .large-only-order-11 {
      order: 11; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-11,
    footer .large-order-11 {
      order: 11; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-order-12,
    footer .large-only-order-12 {
      order: 12; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-order-12,
    footer .large-order-12 {
      order: 12; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-1,
    footer .xlarge-only-order-1 {
      order: 1; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-1,
    footer .xlarge-order-1 {
      order: 1; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-2,
    footer .xlarge-only-order-2 {
      order: 2; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-2,
    footer .xlarge-order-2 {
      order: 2; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-3,
    footer .xlarge-only-order-3 {
      order: 3; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-3,
    footer .xlarge-order-3 {
      order: 3; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-4,
    footer .xlarge-only-order-4 {
      order: 4; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-4,
    footer .xlarge-order-4 {
      order: 4; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-5,
    footer .xlarge-only-order-5 {
      order: 5; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-5,
    footer .xlarge-order-5 {
      order: 5; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-6,
    footer .xlarge-only-order-6 {
      order: 6; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-6,
    footer .xlarge-order-6 {
      order: 6; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-7,
    footer .xlarge-only-order-7 {
      order: 7; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-7,
    footer .xlarge-order-7 {
      order: 7; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-8,
    footer .xlarge-only-order-8 {
      order: 8; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-8,
    footer .xlarge-order-8 {
      order: 8; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-9,
    footer .xlarge-only-order-9 {
      order: 9; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-9,
    footer .xlarge-order-9 {
      order: 9; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-10,
    footer .xlarge-only-order-10 {
      order: 10; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-10,
    footer .xlarge-order-10 {
      order: 10; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-11,
    footer .xlarge-only-order-11 {
      order: 11; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-11,
    footer .xlarge-order-11 {
      order: 11; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-order-12,
    footer .xlarge-only-order-12 {
      order: 12; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-order-12,
    footer .xlarge-order-12 {
      order: 12; } }
  @media screen and (max-width: 45.9375rem) {
    header .small-only-float-right,
    footer .small-only-float-right {
      float: right; }
    header .small-only-float-left,
    footer .small-only-float-left {
      float: left; }
    header .small-only-float-none,
    footer .small-only-float-none {
      float: none; } }
  header .small-float-right,
  footer .small-float-right {
    float: right; }
  header .small-float-left,
  footer .small-float-left {
    float: left; }
  header .small-float-none,
  footer .small-float-none {
    float: none; }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    header .medium-only-float-right,
    footer .medium-only-float-right {
      float: right; }
    header .medium-only-float-left,
    footer .medium-only-float-left {
      float: left; }
    header .medium-only-float-none,
    footer .medium-only-float-none {
      float: none; } }
  @media screen and (min-width: 46rem) {
    header .medium-float-right,
    footer .medium-float-right {
      float: right; }
    header .medium-float-left,
    footer .medium-float-left {
      float: left; }
    header .medium-float-none,
    footer .medium-float-none {
      float: none; } }
  @media screen and (min-width: 63.9375rem) and (max-width: 76.5rem) {
    header .large-only-float-right,
    footer .large-only-float-right {
      float: right; }
    header .large-only-float-left,
    footer .large-only-float-left {
      float: left; }
    header .large-only-float-none,
    footer .large-only-float-none {
      float: none; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-float-right,
    footer .large-float-right {
      float: right; }
    header .large-float-left,
    footer .large-float-left {
      float: left; }
    header .large-float-none,
    footer .large-float-none {
      float: none; } }
  @media screen and (min-width: 76.5625rem) and (max-width: 89.9375rem) {
    header .xlarge-only-float-right,
    footer .xlarge-only-float-right {
      float: right; }
    header .xlarge-only-float-left,
    footer .xlarge-only-float-left {
      float: left; }
    header .xlarge-only-float-none,
    footer .xlarge-only-float-none {
      float: none; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-float-right,
    footer .xlarge-float-right {
      float: right; }
    header .xlarge-float-left,
    footer .xlarge-float-left {
      float: left; }
    header .xlarge-float-none,
    footer .xlarge-float-none {
      float: none; } }
  header .small-display--inline,
  footer .small-display--inline {
    display: inline; }
  @media screen and (min-width: 46rem) {
    header .medium-display--inline,
    footer .medium-display--inline {
      display: inline; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-display--inline,
    footer .large-display--inline {
      display: inline; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-display--inline,
    footer .xlarge-display--inline {
      display: inline; } }
  header .column.row.row, header .row.row.columns,
  header .row.row.columns,
  footer .column.row.row,
  footer .row.row.columns,
  footer .row.row.columns {
    display: flex; }
  @media screen and (min-width: 63.9375rem) {
    header .row,
    header .container,
    footer .row,
    footer .container {
      max-width: 75rem;
      /* 1 */ } }
  header .container,
  footer .container {
    margin-right: auto;
    margin-left: auto; }
  header [href^='tel:'],
  footer [href^='tel:'] {
    white-space: nowrap;
    color: #0075BE; }
    @media screen and (min-width: 63.9375rem) {
      header [href^='tel:'],
      footer [href^='tel:'] {
        pointer-events: auto; }
        header [href^='tel:']:hover, header [href^='tel:']:focus, header [href^='tel:']:active,
        footer [href^='tel:']:hover,
        footer [href^='tel:']:focus,
        footer [href^='tel:']:active {
          text-decoration: initial; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      header [href^='tel:'],
      footer [href^='tel:'] {
        color: #FEFEFE; } }
  header html::before,
  footer html::before {
    content: '{"colors":{"primary":{"ultramarine":"#005587","default":"#0075BE","access":"#0075be","cerulean":"#73c3eb","azure":"#bedceb","slate":"#001928","granite":"#646c76","grey":"#929ba9","light-grey":"#d9dce1","albicant":"#f5f6f7","white":"#FEFEFE","porcelain":"#f4f6f7","polar":"#e6f9fe"},"complimentary":{"sky-blue":"#009ec9","poolside":"#2cbfc1","lilac":"#6a88c3","retrospect":"#00e7b4","olive":"#c3c070","orchid":"#d061a1","sunflower":"#ffc827","maraschino":"#e9425f"},"feedback":{"negative":"#c81414","negative-dark":"#820e0e","positive":"#0b8224"}},"spacing":{"xx-small":"0.125em","x-small":"0.25em","small":"0.5em","medium":"0.75em","large":"1em","x-large":"1.25em","xx-large":"1.5em","xxx-large":"2em","unit-2x":"2em","unit-2-point-5x":"2.5em","unit-3x":"3em","unit-4x":"4em","unit-5x":"5em","unit-6x":"6em","unit-8x":"8em","unit-10x":"10em","unit-11x":"11em","unit-12x":"12em","unit-15x":"15em","unit-16x":"16em","unit-18x":"18em","unit-20x":"20em"},"font":{"numeric-unicode-range":["U+0025","U+0030-0039"],"primary":["Heebo","sans-serif"]},"breakpoints":{"small":0,"medium":736,"large":1023,"xlarge":1225,"xxlarge":1440}}';
    position: absolute;
    z-index: -9999;
    visibility: hidden;
    display: none; }
  header ul,
  footer ul {
    margin: 0;
    padding: 0; }
  header ol,
  header ul ol,
  footer ol,
  footer ul ol {
    padding-left: 1em;
    margin: 0; }
  header li,
  footer li {
    /**
   * List with the attribute [data-item-symbol] has a custom symbol for the 'bullet'.
   *
   * 1. Cannot be position static in order to place the ::before pseudo element.
   * 2. Remove the list styling since it will be custom.
   */ }
    header li[data-item-symbol],
    footer li[data-item-symbol] {
      position: relative;
      /* 1 */
      list-style: none;
      /* 2 */
      /**
     * The pseudo element contains the actual symbol.
     *
     * 1. The symbol to display, cannot be html entity must be ACTUAL symbol.
     */ }
      header li[data-item-symbol]::before,
      footer li[data-item-symbol]::before {
        content: attr(data-item-symbol);
        /* 1 */
        position: absolute;
        left: -1rem; }
  header iframe,
  footer iframe {
    display: block;
    width: 100%;
    border: 0; }
  header video,
  footer video {
    max-width: 100%; }
  header figure,
  footer figure {
    margin: 0; }
  header a,
  footer a {
    display: inline-block;
    /* 1 */
    transition: color 300ms ease, background-color 300ms ease;
    /* 2 */
    /**
   * 1. Anchors inside sup elements MUST be inline otherwise they break into the next line.
   */
    /**
   * 1. External links should have an external icon next to it, unless specified by a data[no-icon]
   */ }
    sup > header a, sup >
    footer a {
      display: inline;
      /* 1 */
      font-weight: 500; }
    header a.external-link::after,
    footer a.external-link::after {
      display: inline-block;
      content: ' ';
      background-image: url("/dist/images/bmo-ext-link.png");
      background-size: 8px 8px;
      height: 8px;
      width: 8px;
      margin-left: 2px; }
  header button,
  footer button {
    cursor: pointer; }
  header fieldset,
  footer fieldset {
    border: none; }
  header input[type="text"],
  header input[type="date"],
  header input[type="datetime"],
  header input[type="datetime-local"],
  header input[type="email"],
  header input[type="month"],
  header input[type="number"],
  header input[type="password"],
  header input[type="search"],
  header input[type="tel"],
  header input[type="time"],
  header input[type="url"],
  header input[type="week"],
  footer input[type="text"],
  footer input[type="date"],
  footer input[type="datetime"],
  footer input[type="datetime-local"],
  footer input[type="email"],
  footer input[type="month"],
  footer input[type="number"],
  footer input[type="password"],
  footer input[type="search"],
  footer input[type="tel"],
  footer input[type="time"],
  footer input[type="url"],
  footer input[type="week"] {
    width: 100%; }
  header input,
  footer input {
    box-sizing: border-box; }
  header picture,
  footer picture {
    display: block; }
  header sub,
  header sup,
  footer sub,
  footer sup {
    font-size: 70%; }
  header sup,
  footer sup {
    top: -0.35em;
    /* 1 */ }
  header hr,
  footer hr {
    width: 100%;
    max-width: 75rem !important; }
  header input::-webkit-calendar-picker-indicator,
  footer input::-webkit-calendar-picker-indicator {
    display: none; }
  header .size-text,
  footer .size-text {
    font-size: 1rem; }
  header .small-size-text,
  footer .small-size-text {
    font-size: 1rem; }
  @media screen and (min-width: 46rem) {
    header .medium-size-text,
    footer .medium-size-text {
      font-size: 1rem; } }
  @media screen and (min-width: 63.9375rem) {
    header .large-size-text,
    footer .large-size-text {
      font-size: 1rem; } }
  @media screen and (min-width: 76.5625rem) {
    header .xlarge-size-text,
    footer .xlarge-size-text {
      font-size: 1rem; } }
  @media screen and (min-width: 90rem) {
    header .xxlarge-size-text,
    footer .xxlarge-size-text {
      font-size: 1rem; } }
  header .font-size-zero,
  footer .font-size-zero {
    font-size: 0; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

.skip-nav.show-on-focus:active, .skip-nav.show-on-focus:focus {
  position: absolute !important;
  z-index: 1;
  background-color: #FEFEFE; }

header {
  flex: 1 0 auto;
  font-family: Heebo,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  header *:focus {
    outline: -webkit-focus-ring-color auto 1px !important; }

header button.search-form__toggle span.icon-hover-action-search span.item-width-0 {
  font-family: Heebo,sans-serif; }

header .link {
  position: inherit;
  font-family: Heebo,sans-serif;
  line-height: inherit;
  font-size: inherit;
  text-align: inherit; }
  header .link::before {
    content: none; }

header button.main-nav__link {
  font-size: 14px;
  text-align: center;
  line-height: 18.4px; }
  @media screen and (max-width: 45.9375rem) {
    header button.main-nav__link {
      text-align: left;
      font-size: 16px; } }

header a.main-nav__link {
  font-size: 14px;
  text-align: center;
  line-height: 18.4px; }
  @media screen and (max-width: 45.9375rem) {
    header a.main-nav__link {
      text-align: left;
      font-size: 1rem; } }

header a.main-nav__link--page {
  text-align: left; }

header a.lob-nav__link {
  font-size: 1rem; }

header .link:before {
  display: none; }

header section {
  padding: 0px; }

header .secondary-header__wrapper {
  font-size: 16px;
  box-sizing: border-box; }

header button:hover {
  border: none; }

header .choose-site__link {
  font-size: 13px;
  line-height: 13px; }

header button {
  height: inherit; }

header .primary-header__right {
  font-size: 13px; }

header .primary-header__root-link.language-toggle__toggle {
  position: relative;
  line-height: 13px; }

header .language-toggle {
  font-size: 16px; }

header .signin__toggle {
  font-size: 13px;
  line-height: 13px; }

header .signin__link--subtext {
  line-height: 1.4em; }

header .signin__item .signin__link {
  line-height: 1.4em; }

@media screen and (max-width: 45.9375rem) {
  header .signin__link--attention-with-subtext {
    text-align: center !important; } }

header .primary-header__toggle {
  box-sizing: border-box; }

header .search__heading {
  box-sizing: border-box; }

header .color-primary {
  color: #0075be; }

header .placeholder-label__input.placeholder-label__input {
  padding: 8px; }

header .placeholder-label__input.placeholder-label__input::placeholder {
  color: #646C76; }

header .search__icon {
  padding: 4.5px; }

header .hide-for-medium.primary-header__locator {
  line-height: 13px; }

header .secondary-header__logo {
  position: relative; }

header .main-nav__back {
  position: absolute;
  padding: 0; }

header .main-nav__link {
  line-height: 22.4px; }

header .choose-site__toggle {
  font-size: 13px;
  width: auto; }

header .signin__toggle {
  box-sizing: border-box; }

header .choose-site__icon {
  box-sizing: border-box; }

header .cta-nav__link {
  font-weight: 400;
  line-height: 22.4px;
  padding-right: 0px; }

@media screen and (min-width: 63.9375rem) {
  header aside .cta-nav__cta .cta-nav__link {
    font-weight: 700; } }

.tl-header-primary-right > li button span.heebo {
  font-family: "Heebo";
  font-weight: 500; }

@media screen and (min-width: 76.5625rem) {
  header .xlg-text--nowrap {
    white-space: nowrap; } }

header ul li {
  list-style-type: none; }

header #search-form .search__input {
  margin: 0; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

.link--chevron {
  display: flex;
  align-items: center; }

.link--white-chevron svg path {
  fill: #FEFEFE; }

.link--rich {
  text-align: center;
  line-height: 1;
  cursor: pointer;
  background-color: #0075BE;
  padding: 0.5em 1em;
  color: #FEFEFE; }
  .link--rich:hover, .link--rich:focus, .link--rich.active {
    text-decoration: none;
    color: #FEFEFE; }

.link__link-position {
  position: relative;
  padding-left: 0.5em; }
  .link__link-position:hover {
    border-bottom: 0.0625rem solid;
    text-decoration: none; }
  .link__link-position::after {
    position: absolute;
    left: 0;
    top: 0.375em; }

.link__padding-btm {
  margin-top: 1.5em;
  margin-bottom: 0.0625rem; }
  @media screen and (min-width: 63.9375rem) {
    .link__padding-btm {
      margin-top: 0; } }
  .link__padding-btm:hover {
    margin-bottom: 0; }

@media screen and (min-width: 46rem) {
  .link--tel {
    color: inherit; } }

.link__no-decoration:hover {
  color: #001928;
  text-decoration: none; }

.link__no-decoration:focus {
  color: #001928;
  text-decoration: none; }

.link--white {
  color: #FEFEFE; }
  .link--white:hover, .link--white:focus, .link--white:active, .link--white.active {
    color: #FEFEFE; }

.link--with-chevron:hover svg g g path {
  fill: #005587; }

.link--with-chevron:hover svg path {
  fill: #005587; }

.link-pill {
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.25px;
  line-height: 16px;
  text-align: center; }
  .link-pill__selected {
    background-color: #0075BE;
    color: #FFFFFF; }
    .link-pill__selected:hover {
      text-decoration: none; }
    .link-pill__selected:focus {
      text-decoration: none;
      border: 2px solid #72C3EB;
      box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.35); }
  .link-pill__selected-with-border {
    border: 2px solid #0075BE;
    background-color: #0075BE;
    color: #FFFFFF; }
    .link-pill__selected-with-border span svg g g {
      fill: #FFFFFF; }
    .link-pill__selected-with-border:hover {
      color: #FFFFFF;
      text-decoration: none; }
    .link-pill__selected-with-border:focus {
      color: #FFFFFF;
      text-decoration: none;
      border: 2px solid #72C3EB;
      box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.35); }
  .link-pill__default {
    border: 2px solid #8890A0;
    color: #0075BE; }
    .link-pill__default:hover {
      border: 2px solid #0075BE;
      text-decoration: none;
      background-color: #0075BE;
      color: #FFFFFF; }
      .link-pill__default:hover span svg g g {
        fill: #FFFFFF; }
    .link-pill__default:focus {
      text-decoration: none;
      border: 2px solid #72C3EB;
      box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.35); }
  .link-pill__icon {
    position: absolute;
    bottom: -2px;
    right: 4px; }


/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Button Component
 *
 * These are used to indicate CTA's or content of importance.
 */
/**
 * 1. Fixes height issues when button is an 'inline' element. ex. <a>
 * 2. The button is supposed to be 20px line height.
 *   We dont do px line heights anymore, this emulates it.
 */
header .button, footer .button {
  /* 2 */
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.01562rem;
  font-weight: 300;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  /* 1 */
  padding: 0.6em 2em;
  border: 0.125rem solid #0075BE;
  border-radius: 5em;
  background: #0075BE;
  color: #FEFEFE;
  text-align: center;
  transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
  cursor: pointer;
  max-width: 90vw;
  /**
     * 1. Remove focus style, only necessary when no hover/focus state change is defined.
     * 2. Remove anchor underlines.
     */
  /**
     * Outline styled buttons have no backgrounds and the border-color matches the font color.
     * This can be changes with utility classes however it does not work with the '--attention' modifier.
     * The outline MUST be the FIRST modified button due to the use of 'currentColor'.
     *
     * 1. Sets the color of the border to match the font.
     */
  /**
     * The light variation of the button.
     * This is commonly used with the button--outline when theres a blue background.
     */
  /**
     * Used for modal close
     */
  /* as per design require a button to be certain size*/
  /**
     * The attention button is used for important callouts.
     */
  /**
      * a button that is white and has blue text
      */
  /**
     * The transparent button is used for buttons with transparent backgrounds.
     */
  /**
     * This is used for a fixed CTA component that spans the whole screen.
     *
     * 1. Remove the border radius since it should be flush agains the sides.
     * 2. Reset the max-width since its set to 90vw above.
     */
  /**
     * Button used for navigation.
     * This button is used for the megamenu language toggle and probably no where else.
     *
     */ }
  header .button.disabled, footer .button.disabled {
    pointer-events: none;
    background-color: white;
    border-color: white;
    background-color: #d9dce1;
    color: #646c76; }
  header .button:hover, header .button:focus, header .button.active, footer .button:hover, footer .button:focus, footer .button.active {
    background: #005587;
    border-color: #005587;
    color: #FEFEFE;
    /* 1 */
    text-decoration: none;
    /* 2 */ }
  header .button--transform, footer .button--transform {
    font-size: 16px;
    text-transform: uppercase;
    padding: 14.4px 32px;
    font-weight: 500; }
  header .button--outline, footer .button--outline {
    background: none;
    border-color: currentColor;
    /* 1 */
    color: #0075BE; }
    header .button--outline:hover, header .button--outline:focus, header .button--outline.active, footer .button--outline:hover, footer .button--outline:focus, footer .button--outline.active {
      background: none;
      border-color: currentColor;
      /* 1 */
      color: #005587; }
  header .button--light, footer .button--light {
    color: #FEFEFE; }
    header .button--light:hover, header .button--light:focus, header .button--light.active, footer .button--light:hover, footer .button--light:focus, footer .button--light.active {
      color: #FEFEFE;
      background: #005587; }
  header .button--large, footer .button--large {
    padding: 1em 0 !important; }
  header .button--close, footer .button--close {
    position: absolute;
    padding: 0;
    top: 0;
    right: 0;
    border: none;
    background: none;
    color: #001928;
    transform: translate(-100%, 50%); }
  header .button--fourteen-em, footer .button--fourteen-em {
    width: 14em; }
  header .button--attention, footer .button--attention {
    border-radius: 5em !important;
    background-color: #c81414;
    border-color: #c81414; }
    header .button--attention.disabled, footer .button--attention.disabled {
      pointer-events: none;
      background-color: white;
      border-color: white; }
    header .button--attention:hover, header .button--attention:focus, header .button--attention.active, footer .button--attention:hover, footer .button--attention:focus, footer .button--attention.active {
      background-color: #820e0e;
      border-color: #820e0e; }
  header .button--white, footer .button--white {
    color: #0075BE;
    background-color: #FEFEFE;
    border-color: #FEFEFE; }
  header .button--white-dark-blue-hover, footer .button--white-dark-blue-hover {
    color: #0075BE;
    background-color: #FEFEFE;
    border-color: #FEFEFE; }
    header .button--white-dark-blue-hover:hover, footer .button--white-dark-blue-hover:hover {
      background: #003656;
      border-color: #003656; }
  header .button--white-text, footer .button--white-text {
    color: #FEFEFE; }
    header .button--white-text:hover, footer .button--white-text:hover {
      text-decoration: underline; }
  header .button--transparent, footer .button--transparent {
    background-color: transparent;
    border: none;
    color: #0075BE;
    padding: 0; }
    header .button--transparent:not(.active):hover, header .button--transparent:not(.active):focus, footer .button--transparent:not(.active):hover, footer .button--transparent:not(.active):focus {
      text-decoration: underline;
      background: transparent;
      color: #0075BE; }
    @media screen and (min-width: 46rem) {
      header .button--transparent-medium, footer .button--transparent-medium {
        background-color: transparent;
        border: none;
        color: #0075BE;
        padding: 0; }
        header .button--transparent-medium:not(.active):hover, header .button--transparent-medium:not(.active):focus, footer .button--transparent-medium:not(.active):hover, footer .button--transparent-medium:not(.active):focus {
          text-decoration: underline;
          background: transparent;
          color: #0075BE; } }
  header .button--square, footer .button--square {
    border-radius: 0; }
  header .button--rounded, footer .button--rounded {
    border-radius: 0.5em; }
  header .button--thin, footer .button--thin {
    border-width: 0.0625rem; }
  header .button--thinner, footer .button--thinner {
    padding-top: 0.25em;
    padding-bottom: 0.25em; }
  header .button--reverse:hover, header .button--reverse:focus, header .button--reverse, footer .button--reverse:hover, footer .button--reverse:focus, footer .button--reverse {
    background-color: #FEFEFE;
    color: #0075BE; }
  @media screen and (max-width: 45.9375rem) {
    header .button--mobile-block, footer .button--mobile-block {
      display: block;
      width: 100%; } }
  header .button--fixed, footer .button--fixed {
    position: fixed;
    width: 100%;
    right: 0;
    left: 0;
    border-radius: 0;
    /* 1 */
    max-width: 100%;
    /* 2 */
    /**
       * This is a fixed button but only for mobile.
       * The reason for the (small only) breakpoint is:
       *   There is no way of knowing what the button should be on medium+.
       *   Because of this the styles should be wrapped in (small only) breakpoint.
       */
    /**
       * Fixed button to top.
       */
    /**
       * Fixed button to bottom
       */ }
    @media screen and (max-width: 45.9375rem) {
      header .button--fixed--mobile, footer .button--fixed--mobile {
        position: fixed;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        max-width: 100%;
        /* 2 */ } }
    header .button--fixed-top, footer .button--fixed-top {
      top: 0; }
    header .button--fixed-bottom, footer .button--fixed-bottom {
      bottom: 0; }
  header .button__product-column, footer .button__product-column {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 5em !important;
    height: 56px;
    width: 190px;
    letter-spacing: 0.015rem;
    padding: 1em; }
    @media screen and (max-width: 45.9375rem) {
      header .button__product-column, footer .button__product-column {
        width: 216px; } }
  header .button__primary-ds, footer .button__primary-ds {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 5em !important;
    min-width: 190px;
    width: auto;
    letter-spacing: 0.015rem;
    box-shadow: 0 2px 8px 0 rgba(0, 25, 40, 0.04), 0 4px 24px 0 rgba(0, 25, 40, 0.1);
    padding: 1em 1.5em; }
    @media screen and (max-width: 45.9375rem) {
      header .button__primary-ds, footer .button__primary-ds {
        min-width: 170px;
        width: auto; } }
  header .button--with-icon svg path, footer .button--with-icon svg path {
    fill: #0075be; }
    header .button--with-icon svg path:hover, footer .button--with-icon svg path:hover {
      fill: #005587; }
  header .button--download-white svg path, footer .button--download-white svg path {
    fill: #ffffff; }
  header .button--mega-navigation, footer .button--mega-navigation {
    border: 0.0625rem solid #FEFEFE;
    color: #FEFEFE; }
    @media screen and (min-width: 46rem) {
      header .button--mega-navigation, footer .button--mega-navigation {
        padding-right: 1em;
        padding-left: 1em;
        background: none;
        border: none;
        color: #0075BE; } }
    header .button--mega-navigation:hover, header .button--mega-navigation:hover, header .button--mega-navigation.active, footer .button--mega-navigation:hover, footer .button--mega-navigation:hover, footer .button--mega-navigation.active {
      background-color: #FEFEFE;
      border-color: #FEFEFE;
      color: #0075BE; }
    @media screen and (min-width: 46rem) {
      header .button--mega-navigation.active, header .button--mega-navigation.active:hover, header .button--mega-navigation.active:focus, footer .button--mega-navigation.active, footer .button--mega-navigation.active:hover, footer .button--mega-navigation.active:focus {
        background-color: #0075BE;
        color: #FEFEFE;
        text-decoration: none; } }
    @media screen and (min-width: 46rem) {
      header .button--mega-navigation:hover, header .button--mega-navigation:focus, footer .button--mega-navigation:hover, footer .button--mega-navigation:focus {
        background-color: initial;
        color: #0075BE;
        text-decoration: underline; } }
  header .button--no-transform-text, footer .button--no-transform-text {
    text-transform: initial; }
  header .button--secondary-alt, footer .button--secondary-alt {
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 5em !important;
    min-width: 190px;
    width: auto;
    letter-spacing: .015rem;
    padding: 1em 1.5em !important;
    display: inline-flex; }
  header .button--design, footer .button--design {
    background: #d9dce1;
    height: 56px;
    border-radius: 28px;
    border: 2px solid #d9dce1;
    padding-left: 32px;
    font-weight: 700;
    padding-right: 32px;
    font-size: 14px;
    box-sizing: border-box;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    line-height: 52px;
    text-align: center;
    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    overflow: hidden;
    text-decoration: none; }
    header .button--design__primary, footer .button--design__primary {
      background: #0075be;
      border: 2px solid #0075be;
      color: #ffffff !important;
      display: inline-block; }
      header .button--design__primary:hover, footer .button--design__primary:hover {
        background: #005587;
        border: 2px solid #005587;
        box-sizing: border-box; }
      header .button--design__primary:focus, footer .button--design__primary:focus {
        border: 2px solid #73c3eb;
        box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.35); }
    header .button--design__secondary, footer .button--design__secondary {
      background: rgba(255, 255, 255, 0);
      border: 2px solid #0075be;
      color: #0075be; }
      header .button--design__secondary:hover, footer .button--design__secondary:hover {
        background: rgba(255, 255, 255, 0);
        border: 2px solid #005587;
        color: #005587;
        text-decoration: none; }
        header .button--design__secondary:hover svg path, footer .button--design__secondary:hover svg path {
          fill: #005587; }
      header .button--design__secondary:focus, footer .button--design__secondary:focus {
        border: 2px solid #73C3EB;
        box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.35);
        text-decoration: none; }
      header .button--design__secondary svg path, footer .button--design__secondary svg path {
        fill: #0075be; }
    header .button--design__loans, footer .button--design__loans {
      min-width: 250px; }
  header .button.plain-anchor, footer .button.plain-anchor {
    text-transform: unset;
    background: transparent;
    border: none;
    padding: 0;
    font-weight: normal;
    font-size: inherit;
    color: #0075BE;
    cursor: pointer;
    line-height: inherit; }
    header .button.plain-anchor:hover, footer .button.plain-anchor:hover {
      text-decoration: underline; }

.button-link-footer {
  color: #FEFEFE;
  font-weight: 700; }

.button-link-footer:hover, .button-link-footer:focus, .button-link-footer.active {
  color: #FEFEFE;
  text-decoration: underline; }

.tv-button {
  border: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01562rem;
  transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
  padding: 1rem 2rem .9rem;
  border-radius: 2rem !important;
  background-color: #0075BE;
  color: #FEFEFE; }
  .tv-button:hover {
    background-color: #005587; }
  .tv-button:active {
    background-color: #005587; }
  .tv-button:focus {
    background-color: #005587; }
  .tv-button:disabled {
    background-color: #929ba9; }
  .tv-button:hover {
    color: #FEFEFE; }
  .tv-button:hover {
    text-decoration: none; }
  .tv-button--small {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01562rem;
    transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
    padding: 1rem 2rem .9rem;
    border-radius: 2rem !important;
    background-color: #0075BE;
    color: #FEFEFE; }
    .tv-button--small:hover {
      background-color: #005587; }
    .tv-button--small:active {
      background-color: #005587; }
    .tv-button--small:focus {
      background-color: #005587; }
    .tv-button--small:disabled {
      background-color: #929ba9; }
    .tv-button--small:hover {
      color: #FEFEFE; }
  .tv-button--primary {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01562rem;
    transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
    padding: 1rem 2rem .9rem;
    border-radius: 2rem !important;
    background-color: #0075BE;
    color: #FEFEFE;
    background-color: #c81414;
    text-decoration: none;
    color: #FEFEFE; }
    .tv-button--primary:hover {
      background-color: #005587; }
    .tv-button--primary:active {
      background-color: #005587; }
    .tv-button--primary:focus {
      background-color: #005587; }
    .tv-button--primary:disabled {
      background-color: #929ba9; }
    .tv-button--primary:hover {
      color: #FEFEFE; }
    .tv-button--primary:hover {
      background-color: #820e0e;
      text-decoration: none;
      color: #FEFEFE; }
  .tv-button--secondary {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01562rem;
    transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
    padding: 1rem 2rem .9rem;
    border-radius: 2rem !important;
    color: #0075BE;
    border: 0.125em solid #0075BE;
    background: transparent; }
    .tv-button--secondary:hover {
      color: #005587;
      background: transparent;
      border: 0.125em solid #005587; }
    .tv-button--secondary:active {
      color: #005587;
      background: transparent;
      border: 0.125em solid #005587; }
    .tv-button--secondary:focus {
      color: #005587;
      background: transparent;
      border: 0.125em solid #005587; }
    .tv-button--secondary:disabled {
      color: #929ba9;
      border: 0.125em solid #929ba9; }
  .tv-button--tertiary {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01562rem;
    transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
    color: #005587;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    transition: all 300ms ease 0s; }
    .tv-button--tertiary::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0.125em;
      bottom: -0.25em;
      left: 0;
      background-color: #001928;
      transform: scaleX(0);
      transition: all 300ms ease 0s; }
    .tv-button--tertiary:hover::before {
      transform: scaleX(1); }
    .tv-button--tertiary:hover {
      color: #001928; }
    .tv-button--tertiary:active {
      color: #001928; }
    .tv-button--tertiary:focus {
      color: #001928; }
  .tv-button--flat {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01562rem;
    transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
    color: #005587;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    transition: all 300ms ease 0s;
    padding: 0;
    background: none;
    border: none;
    max-width: none; }
    .tv-button--flat::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0.125em;
      bottom: -0.25em;
      left: 0;
      background-color: #001928;
      transform: scaleX(0);
      transition: all 300ms ease 0s; }
    .tv-button--flat:hover::before {
      transform: scaleX(1); }
    .tv-button--flat:hover {
      color: #001928; }
    .tv-button--flat:active {
      color: #001928; }
    .tv-button--flat:focus {
      color: #001928; }
    .tv-button--flat:hover {
      background: none; }

.button-link {
  color: #0075BE; }
  .button-link:hover, .button-link:focus {
    color: #005587;
    text-decoration: underline; }


@charset "UTF-8";
/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

.list--spacing-large li {
  padding: 0.5em 0; }

.list--terms li {
  margin: 1em; }

@media screen and (min-width: 63.9375rem) {
  .list--columns {
    column-count: 2;
    column-gap: 3em; } }

.list--center-small {
  justify-content: center; }
  @media screen and (min-width: 46rem) {
    .list--center-small {
      justify-content: flex-start; } }

.list-dash-bullet {
  list-style: none; }
  .list-dash-bullet li::before {
    content: "\2013";
    position: absolute;
    margin-left: -1em; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

.bold {
  font-weight: 700; }

/* Classes below will need to be exposed globally in a different file */
.size-h1 {
  font-size: 1.875rem; }

.size-h2 {
  font-size: 1.62469rem; }

.size-h3 {
  font-size: 1.37437rem; }

.size-h4 {
  font-size: 1.125rem; }

.size-h5,
.size-h6 {
  font-size: .99938rem; }

.heading-em {
  margin-top: 1em; }
  .heading-em::after {
    content: "";
    background: #c81414;
    height: 0.1em;
    width: 3em;
    display: block;
    margin: 0.25em auto 0.5em; }
  .heading-em--large {
    margin-top: 1em; }
    .heading-em--large::after {
      content: "";
      background: #c81414;
      height: 0.15em;
      width: 4em;
      display: block;
      margin: 0.25em auto 0.5em; }
    @media screen and (min-width: 46rem) {
      .heading-em--large {
        margin-top: 0; } }
    .heading-em--large::after {
      margin-top: 1rem; }
      @media screen and (min-width: 46rem) {
        .heading-em--large::after {
          margin-top: 0; } }
  .heading-em--full-width {
    margin-top: 1em; }
    .heading-em--full-width::after {
      content: "";
      background: #c81414;
      height: 0.1em;
      width: 100%;
      display: block;
      margin: 0.25em auto 0.5em; }
  @media screen and (min-width: 46rem) {
    .heading-em--left::after {
      margin: 1em 0 1em; } }
  .heading-em--flush {
    margin-top: 1em; }
    .heading-em--flush::after {
      content: "";
      background: #c81414;
      height: 0.1em;
      width: 3em;
      display: block;
      margin: 0.25em auto 0; }
  .heading-em--radius-blue {
    margin-top: 1em; }
    .heading-em--radius-blue::after {
      content: "";
      background: #c81414;
      height: 4px;
      width: 64px;
      display: block;
      margin: 0.25em auto 0.5em; }
    .heading-em--radius-blue::after {
      background: #009EC9;
      border-radius: 4px; }

.business-compare .heading-em--full-width::after {
  margin-top: 0.5em;
  margin-bottom: 1em; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
* Footer Component
*/
.footer,
footer {
  -webkit-font-smoothing: antialiased;
  font-family: Heebo, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smooth: antialiased;
  /**
        * The primary footer is the blue footer, usually the last thing on the page.
        */
  /**
        * The secondary footer wrapper.
        */
  /**
        * Most of the links in the secondary footer fall under this category.
        * They have different defaults then the global links because the background of the secondary footer is grey.
        *
        * 1. On mobile only the top links are displayed so by default hide all links.
        */
  /**
        * The secondary footer section is actually the wrapping list item.
        * It wraps each individual LOB.
        */
  /**
        * This wraps the top site section of the footer.
        * It is only displayed on screens larger then medium.
        */
  /**
        * The sites on the top right of the footer.
        */
  /**
        * An individual site inside the sites list.
        * This corresponds to the list item itself.
        */ }
  .footer ul.no-bullet,
  .footer ol.no-bullet,
  .footer li.no-bullet,
  footer ul.no-bullet,
  footer ol.no-bullet,
  footer li.no-bullet {
    list-style: none; }
  .footer--primary,
  footer--primary {
    display: inline-table;
    width: 100%;
    background-color: #0075BE;
    /**
            * Since the primary footer has a blue background
            *   The anchors must be white.
            *   Nesting is not an issue because it sets a new default for primary footers.
            */ }
    .footer--primary a, .footer--primary a:hover, .footer--primary a:focus,
    footer--primary a,
    footer--primary a:hover,
    footer--primary a:focus {
      color: #FEFEFE; }
    .footer--primary .link::before,
    footer--primary .link::before {
      content: none; }
  .footer__wrapper,
  footer__wrapper {
    position: relative;
    box-sizing: border-box;
    position: relative;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 0 !important; }
    @media screen and (min-width: 46rem) {
      .footer__wrapper,
      footer__wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; } }
  .footer__section,
  footer__section {
    display: flex;
    width: 100%;
    width: 100%;
    padding-bottom: 0.5em;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0; }
    @media screen and (min-width: 46rem) {
      .footer__section,
      footer__section {
        padding-left: 24px;
        padding-right: 24px; } }
    .footer__section--full,
    footer__section--full {
      flex-basis: 100%;
      padding-bottom: 0px; }
  .footer__heading,
  footer__heading {
    flex-basis: 100%;
    margin-bottom: 0.375em;
    margin-right: 1.25em;
    color: #FEFEFE; }
    @media screen and (min-width: 46rem) {
      .footer__heading,
      footer__heading {
        flex-basis: auto; } }
    .footer__heading--small-font-size,
    footer__heading--small-font-size {
      font-size: 1.5em; }
    .footer__heading > a,
    footer__heading > a {
      font-family: inherit;
      font-size: inherit;
      height: auto;
      margin-top: 0; }
  .footer__list,
  footer__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none; }
  .footer__item,
  footer__item {
    font-size: 0.75rem;
    margin: 0 0.75em 0.75em 0;
    padding: 0 0.75em 0 0;
    border-right: 0.06em solid #73c3eb;
    line-height: 1.6em; }
    .footer__follow .footer__item, .footer__follow
    footer__item {
      border-right: 0; }
    .footer__item:first-child,
    footer__item:first-child {
      padding-left: 0;
      border-left: none; }
    .footer__item:last-child,
    footer__item:last-child {
      border-right: 0; }
    .footer__item--joined,
    footer__item--joined {
      border: none; }
    .footer__item .icon path,
    footer__item .icon path {
      fill: currentColor; }
    @media screen and (min-width: 63.9375rem) {
      .footer__item,
      footer__item {
        margin-bottom: 0; } }
    .footer__item > a,
    footer__item > a {
      margin-bottom: 0.5em; }
      .footer__item > a.link,
      footer__item > a.link {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        height: auto;
        margin-top: 0;
        padding-right: 0; }
    .footer__item > button,
    footer__item > button {
      height: auto; }
    .footer__item--font-14,
    footer__item--font-14 {
      font-size: 0.875rem; }
    .footer__item--svg-no-stroke path,
    footer__item--svg-no-stroke path {
      stroke: none !important; }
  .footer__follow-section,
  footer__follow-section {
    position: absolute;
    right: 44px;
    top: 40px;
    margin-bottom: 1em; }
    @media screen and (max-width: 45.9375rem) {
      .footer__follow-section,
      footer__follow-section {
        right: auto;
        top: auto;
        bottom: 0;
        margin-bottom: 8px; } }
  .footer__cdicLogo,
  footer__cdicLogo {
    width: 4.40625rem;
    margin-bottom: -0.75rem;
    margin-top: -0.75rem;
    padding-left: 0.34375rem; }
  .footer__divider,
  footer__divider {
    opacity: 0.2; }
    .footer__divider-spacing-bottom,
    footer__divider-spacing-bottom {
      margin-bottom: 2.6em; }
    .footer__divider-spacing-bottom-large,
    footer__divider-spacing-bottom-large {
      margin-bottom: 3.6em; }
  @media screen and (max-width: 45.9375rem) {
    .footer__no-padding,
    footer__no-padding {
      padding-bottom: 0; } }
  .footer--secondary.bg-grey,
  footer--secondary.bg-grey {
    background-color: #f5f6f7; }
  .footer--secondary.bg-white,
  footer--secondary.bg-white {
    background-color: #FEFEFE; }
  @media screen and (max-width: 45.9375rem) {
    .footer--secondary,
    footer--secondary {
      padding: 2em 0; } }
  @media screen and (min-width: 46rem) {
    .footer--secondary,
    footer--secondary {
      padding: 2em 1.5em;
      padding-top: 2.5em;
      padding-bottom: 2.5em;
      margin: 0; } }
  .footer--secondary > div:last-child > ul,
  footer--secondary > div:last-child > ul {
    display: flex;
    justify-content: space-between; }
    .footer--secondary > div:last-child > ul > li > ul > li,
    footer--secondary > div:last-child > ul > li > ul > li {
      line-height: inherit; }
    .footer--secondary > div:last-child > ul > li > ul > li > a,
    footer--secondary > div:last-child > ul > li > ul > li > a {
      color: #414141;
      font-size: 15px; }
      .footer--secondary > div:last-child > ul > li > ul > li > a.blue,
      footer--secondary > div:last-child > ul > li > ul > li > a.blue {
        color: #0075BE; }
      .footer--secondary > div:last-child > ul > li > ul > li > a.blue:hover,
      footer--secondary > div:last-child > ul > li > ul > li > a.blue:hover {
        color: #0075BE; }
      @media screen and (max-width: 45.9375rem) {
        .footer--secondary > div:last-child > ul > li > ul > li > a,
        footer--secondary > div:last-child > ul > li > ul > li > a {
          font-weight: 500;
          line-height: 1.5rem; } }
      .footer--secondary > div:last-child > ul > li > ul > li > a:hover,
      footer--secondary > div:last-child > ul > li > ul > li > a:hover {
        color: #414141; }
    @media screen and (min-width: 46rem) {
      .footer--secondary > div:last-child > ul > li > ul > li:first-child a,
      footer--secondary > div:last-child > ul > li > ul > li:first-child a {
        font-weight: 500; } }
    @media screen and (max-width: 45.9375rem) {
      .footer--secondary > div:last-child > ul,
      footer--secondary > div:last-child > ul {
        flex-direction: column;
        /* > li > ul > li:not(:first-child) {
                        display: none;
                    }*/ }
        .footer--secondary > div:last-child > ul > li,
        footer--secondary > div:last-child > ul > li {
          margin: 0;
          padding: 0; }
        .footer--secondary > div:last-child > ul > li > ul > li,
        footer--secondary > div:last-child > ul > li > ul > li {
          margin: 0 !important; }
        .footer--secondary > div:last-child > ul > li > ul.footer-secondary-last > li,
        footer--secondary > div:last-child > ul > li > ul.footer-secondary-last > li {
          display: block; } }
  .footer__secondary-link,
  footer__secondary-link {
    display: none;
    /* 1 */
    padding-top: 0.25em;
    /**
            * 1. Because the secondary footer is grey, we must reset the colors of the anchors.
            */
    /**
            * The top links are usually first link of every section.
            * Also usually they are the heading links.
            * These show up on mobile as well.
            *
            * 1. Display top level links ONLY on mobile
            */
    /**
            * 1. On medium up all links should show up.
            */ }
    .footer__secondary-link, .footer__secondary-link:hover, .footer__secondary-link:active,
    footer__secondary-link,
    footer__secondary-link:hover,
    footer__secondary-link:active {
      color: #001928;
      /* 1 */ }
    .footer__secondary-link--top,
    footer__secondary-link--top {
      display: inline-block;
      /* 1 */ }
    @media screen and (min-width: 46rem) {
      .footer__secondary-link,
      footer__secondary-link {
        display: inline-block;
        /* 1 */ } }
  .footer__secondary-section,
  footer__secondary-section {
    color: #414141; }
    @media screen and (min-width: 46rem) {
      .footer__secondary-section,
      footer__secondary-section {
        margin-bottom: 1em; } }
  .footer__site-section,
  footer__site-section {
    box-sizing: border-box;
    align-items: center;
    /**
            * Breakpoint (small only) because reseting display is a bit of an issue.
            * There is no way of knowing what the display should be for sure.
            */ }
    .footer__site-section a,
    footer__site-section a {
      font-size: 1.2rem;
      font-weight: 500; }
      .footer__site-section a:hover,
      footer__site-section a:hover {
        text-decoration: none; }
    @media screen and (max-width: 45.9375rem) {
      .footer__site-section,
      footer__site-section {
        display: none !important; } }
    .footer__site-section li,
    footer__site-section li {
      margin-left: 1em; }
      .footer__site-section li:last-child,
      footer__site-section li:last-child {
        padding-left: 1em;
        border-left: 1px solid #cacaca; }
  .footer__sites,
  footer__sites {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem; }
    .footer__sites a,
    footer__sites a {
      color: #0075be; }
      .footer__sites a:hover,
      footer__sites a:hover {
        color: #0075be; }
  .footer__site,
  footer__site {
    /**
            * The padding used for the individual site links.
            * This is also applied to the current site.
            */
    /**
            * Because we need to add paddings and all to the inner anchor this dom traversal is ok.
            */
    /**
            * This corresponds to the current site we are on.
            */ }
    .footer__site > a,
    footer__site > a {
      padding-top: 1em;
      padding-right: 0.5em;
      padding-bottom: 1em;
      padding-left: 0.5em; }
      @media screen and (min-width: 63.9375rem) {
        .footer__site > a,
        footer__site > a {
          padding-right: 1em;
          padding-left: 1em; } }
    .footer__site:last-child,
    footer__site:last-child {
      /**
                * The last site link should be flush against the right.
                */ }
      .footer__site:last-child > a,
      footer__site:last-child > a {
        border-left: 0.0625rem solid #929ba9;
        padding-right: 0;
        padding-left: 1em;
        margin-left: 0.5em; }
        @media screen and (min-width: 63.9375rem) {
          .footer__site:last-child > a,
          footer__site:last-child > a {
            margin-left: 0; } }
    .footer__site--current,
    footer__site--current {
      padding-top: 1em;
      padding-bottom: 0; }
      .footer__site--current a,
      footer__site--current a {
        color: #414141; }
        .footer__site--current a > h2,
        footer__site--current a > h2 {
          font-size: 1.2rem;
          font-weight: 500; }
        .footer__site--current a:hover,
        footer__site--current a:hover {
          color: #414141; }
  .footer--disclaimer,
  footer--disclaimer {
    background-color: #0075BE;
    color: #FEFEFE; }
    .footer--disclaimer a,
    footer--disclaimer a {
      color: #FEFEFE; }
      .footer--disclaimer a > abbr,
      footer--disclaimer a > abbr {
        cursor: pointer; }
    .footer--disclaimer abbr,
    footer--disclaimer abbr {
      color: #FEFEFE; }
  .footer-disclaimer-logo,
  footer-disclaimer-logo {
    display: inline; }
    .footer-disclaimer-logo picture,
    footer-disclaimer-logo picture {
      float: right;
      margin: 0 0 1em 1em; }
  .footer__notice,
  footer__notice {
    color: #FEFEFE;
    font-size: 0.85rem; }
    .footer__notice__text,
    footer__notice__text {
      font-weight: 400; }
    .footer__notice__title,
    footer__notice__title {
      margin-top: 1.8em;
      font-weight: 700 !important; }
    .footer__notice .footer__ehl_logo,
    footer__notice .footer__ehl_logo {
      float: right;
      background: url(https://www.bmoharris.com/img/logos/ehl_wh.png) no-repeat scroll center center transparent;
      height: 48px; }
      .footer__notice .footer__ehl_logo a,
      footer__notice .footer__ehl_logo a {
        margin: 2.85rem 1.25rem 0 1.25rem;
        color: #FEFEFE;
        font-size: 0.5rem;
        font-weight: 700;
        text-decoration: none; }
    .footer__notice abbr[title],
    footer__notice abbr[title] {
      color: #FEFEFE;
      border-bottom: 1px dotted;
      text-decoration: underline dotted; }
    .footer__notice strong.uppercase,
    footer__notice strong.uppercase {
      text-transform: uppercase;
      font-size: 0.75rem; }
  .footer .nesbittburns-white-footer,
  footer .nesbittburns-white-footer {
    background-color: #ffffff; }
    @media screen and (max-width: 45.9375rem) {
      .footer .nesbittburns-white-footer,
      footer .nesbittburns-white-footer {
        box-sizing: border-box;
        padding: 2rem 1.5rem 4rem 1.5rem; }
        .footer .nesbittburns-white-footer li,
        footer .nesbittburns-white-footer li {
          text-align: center;
          margin: 0 0 1rem 0;
          padding: 0;
          width: 100%; } }
    @media screen and (min-width: 46rem) {
      .footer .nesbittburns-white-footer,
      footer .nesbittburns-white-footer {
        padding: 4rem 3rem; }
        .footer .nesbittburns-white-footer .footer__list,
        footer .nesbittburns-white-footer .footer__list {
          display: table-row; }
        .footer .nesbittburns-white-footer li,
        footer .nesbittburns-white-footer li {
          display: table-cell;
          vertical-align: middle;
          border-left: 1px solid #cecece;
          padding-left: 1.5rem;
          padding-right: 1.5rem; } }
    .footer .nesbittburns-white-footer a,
    footer .nesbittburns-white-footer a {
      color: #0075be;
      padding: 0;
      font-weight: 400; }
      .footer .nesbittburns-white-footer a:hover,
      footer .nesbittburns-white-footer a:hover {
        color: #0075be;
        text-decoration: none; }

.close-button {
  color: #8a8a8a !important; }
  .close-button:hover {
    color: #001928 !important; }

footer .middle {
  padding-bottom: 0.5em; }

footer .top {
  padding-bottom: 0px; }

footer .bottom {
  padding-bottom: 0px; }

footer .spacing-top--none {
  margin-top: 0px; }

footer .spacing-top--medium {
  margin-top: 1.25rem; }

footer .always-show {
  display: block !important; }

footer li.end {
  margin-right: 0px !important; }

footer .footer__follow-section .footer__item {
  margin-right: 16px; }

footer .padding-0 {
  padding: 0 !important; }

footer .padding-left-24 {
  padding-left: 1.5rem !important; }

footer .padding-left-48 {
  padding-left: 3rem !important; }

footer .padding-right-24 {
  padding-right: 1.5rem !important; }

footer .padding-right-48 {
  padding-right: 3rem !important; }

footer .margin-bottom-8 {
  margin-bottom: .5rem !important; }

footer .margin-left-24 {
  margin-left: 1.5rem !important; }

footer .margin-left-48 {
  margin-left: 3rem !important; }

footer .margin-right-24 {
  margin-right: 1.5rem !important; }

footer .margin-right-48 {
  margin-right: 3rem !important; }

footer .width-100 {
  width: 100%; }

footer .border-none {
  border: 0 !important; }

footer .background-white {
  background-color: #fff; }

footer button {
  background-color: transparent; }

.footer--primary button {
  background-color: transparent; }

.footer--primary a.link.hover-blue,
.footer--primary a.link.hover-blue {
  color: #0075be; }

.footer--primary a.link.hover-blue:hover,
.footer--primary a.link.hover-blue:focus {
  color: #414141; }

.button-link-footer-outline {
  color: #fefefe;
  font-weight: 700; }

.button-link-footer-outline:hover,
.button-link-footer-outline:focus,
.button-link-footer-outline.active {
  color: #fefefe;
  text-decoration: underline;
  outline: -webkit-focus-ring-color auto 1px; }

footer .link,
.footer .link {
  font-family: Heebo, sans-serif;
  font-size: inherit;
  line-height: inherit; }
  footer .link::before,
  .footer .link::before {
    content: none; }

footer strong,
.footer strong {
  display: inline;
  margin: 0; }

footer .footer__item > a,
.footer .footer__item > a {
  margin: 0 0 0.5em 0; }

footer ul li {
  list-style-type: none; }

.footer--primary a.link.hover-blue:hover,
.footer--primary a.link.hover-blue:focus {
  color: #414141; }

footer *:focus {
  outline: -webkit-focus-ring-color auto 1px !important; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Megamenu Settings
 * namespace: $megamenu-
 * scope: @global.
 */
/* Max width */
/**
 * Root level link
 * These are used for th eroot level links.
 * There are declarations in the _primary.scss file AND
 *   _sign-in.scss file.
 * The font is a random number because they said match it with production
 *  ignore standards.
 */
/* Signin menu color */
/* Secondary header toggle */
/* Secondary header color */
/**
 * Base padding-left.
 * This is used on most elements for padding left for alignment.
 */
.primary-header__root-link {
  /**
     * Primary heading is smaller on tablet.
     * 1. Since the primary header is blue on medium up,
     * the root links must be white.
     */ }
  @media screen and (min-width: 46rem) {
    .primary-header__root-link {
      font-weight: 700 !important;
      /**
       * For large screens space out the links.
       * Theres not enough space on medium so leave as is for those.
       */ }
      .primary-header__root-link, .primary-header__root-link:hover, .primary-header__root-link:focus {
        color: #FEFEFE; }
      .primary-header__root-link--spaced {
        margin-left: 1em; } }
    @media screen and (min-width: 46rem) and (min-width: 46rem) and (max-width: 63.875rem) {
      .primary-header__root-link--spaced {
        margin-left: 0.4em; } }

/**
 * The choose site section is medium up only.
 * 1. The choose site section if on the left, the rest goes to the right.
 */
.choose-site {
  background-color: #FEFEFE;
  /**
   * The heading is used as a toggle for tablet.
   */
  /**
   * The choose site main navigation wrapper.
   */
  /**
   * The choose site toggle.
   */
  /**
   * The sites wrapping list.
   */
  /**
   * The individual site items.
   */
  /**
   * The actual links.
   */ }
  @media screen and (max-width: 45.9375rem) {
    .choose-site {
      display: none; } }
  @media screen and (min-width: 63.9375rem) {
    .choose-site {
      margin-right: auto;
      /* 1 */
      background: none; } }
  @media screen and (min-width: 63.9375rem) {
    .choose-site__heading {
      display: none; } }
  .choose-site__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: #FEFEFE;
    z-index: 1;
    /**
     * Only hide the actual site choose nav on medium.
     */ }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .choose-site__nav:not([class*="is-open"]) {
        display: none; }
      .no-js .choose-site:hover .choose-site__nav {
        display: block;
        z-index: 10; } }
    @media screen and (min-width: 63.9375rem) {
      .choose-site__nav {
        position: static;
        background: none; } }
  .choose-site__toggle {
    padding-right: 1em;
    padding-left: 1em; }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .choose-site__toggle {
        padding-right: 0.5em;
        padding-left: 0.5em;
        color: #0075BE !important; } }
    .choose-site__toggle, .choose-site__toggle:hover, .choose-site__toggle:focus {
      color: #0075BE; }
  .choose-site__sites {
    display: flex; }
    @media screen and (min-width: 46rem) {
      .choose-site__sites {
        padding-top: 1em;
        padding-bottom: 1em; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .choose-site__sites .choose-site__link, .choose-site__sites .choose-site__link:hover, .choose-site__sites .choose-site__link:focus {
        font-weight: 400;
        color: #0075BE;
        background-color: #FEFEFE; }
      .choose-site__sites .choose-site__link .choose-site__icon {
        display: flex; } }
    @media screen and (min-width: 63.9375rem) {
      .choose-site__sites {
        padding-top: 0;
        padding-bottom: 0; } }
  .choose-site__site {
    text-align: center; }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .choose-site__site {
        flex: 1; } }
  .choose-site__link {
    color: #FEFEFE;
    padding: 1.25em 1em;
    font-weight: 700;
    font-size: .8125rem;
    /**
     * Remove the underline.
     */
    /**
     * Overwrite root-link styles just for tablet.
     */
    /**
     * On large screens the choose site links are always showing.
     * 1. Standards arent a thing anymore they said make it look like production.
     *    This makes it look like production.
     */ }
    @media screen and (min-width: 46rem) {
      .choose-site__link, .choose-site__link:hover, .choose-site__link:focus {
        text-decoration: none; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .choose-site__link {
        font-weight: 400; }
        .choose-site__link, .choose-site__link:hover, .choose-site__link:focus {
          color: #0075BE;
          background-color: #FEFEFE; } }
    @media screen and (min-width: 63.9375rem) {
      .choose-site__link {
        /* 1 */
        display: block;
        padding-right: 1em !important;
        padding-left: 1em !important;
        border-right: 0.0625rem solid #73c3eb; }
        .choose-site__link[class*="is-current"], .choose-site__link:hover[class*="is-current"], .choose-site__link:focus[class*="is-current"] {
          color: #0075BE;
          background-color: #FEFEFE !important; }
        .choose-site__link:hover, .choose-site__link:active {
          background-color: #005587 !important; } }
  @media screen and (min-width: 46rem) {
    .choose-site__icon {
      margin-right: auto;
      margin-bottom: 1em;
      margin-left: auto;
      display: flex;
      /* Specificity booster */ }
      .choose-site__icon.choose-site__icon {
        display: flex; } }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

.image-overlay {
  position: relative;
  display: inline-flex;
  align-items: center; }
  .image-overlay__content {
    position: absolute;
    max-width: 100%;
    padding: 1em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto; }
    .image-overlay__content--right-fifty {
      position: absolute;
      max-width: 50%;
      padding: 1em;
      right: 0; }
    .image-overlay__content--left-fifty {
      position: absolute;
      max-width: 50%;
      padding: 1em;
      left: 0; }

.static-banner {
  display: flex;
  justify-content: center;
  position: relative; }
  .static-banner__left {
    position: absolute;
    top: 0.1rem;
    left: 0.4rem; }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .static-banner__left {
        top: 1.365rem;
        left: 1rem; } }
    @media screen and (min-width: 63.9375rem) {
      .static-banner__left {
        top: 1.365rem;
        left: 3rem; } }
  .static-banner__center {
    position: absolute;
    top: 4rem; }
    @media screen and (min-width: 63.9375rem) {
      .static-banner__center {
        top: 4.365rem;
        left: 17rem; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .static-banner__center {
        left: 0.3rem; } }

.card-summary-cta__special-ribbon {
  position: relative; }
  .card-summary-cta__special-ribbon .special-ribbon {
    right: 50%;
    top: 70%;
    transform: translate(-15%); }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .card-summary-cta__special-ribbon .special-ribbon {
        right: 5%;
        top: 40%; } }
  @media screen and (min-width: 63.9375rem) {
    .card-summary-cta__special-ribbon .card-summary-cta__ribbon-image {
      max-width: none; } }

.full-width-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }

.special-ribbon {
  background: #c81414;
  color: #fff;
  line-height: 1.9;
  position: absolute;
  padding: 0 .75em;
  font-size: .75rem;
  text-align: center;
  white-space: nowrap; }
  .special-ribbon:before {
    border-style: solid;
    border-color: #820e0e transparent transparent;
    border-width: 1em 0 0 1em;
    bottom: -1em;
    content: "";
    display: block;
    left: 0;
    position: absolute; }
  .special-ribbon:after {
    bottom: 0;
    border: .9em solid #c81414;
    border-left-width: 0;
    border-right-color: transparent;
    content: "";
    display: block;
    position: absolute;
    right: -.9em;
    z-index: 1; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Megamenu Settings
 * namespace: $megamenu-
 * scope: @global.
 */
/* Max width */
/**
 * Root level link
 * These are used for th eroot level links.
 * There are declarations in the _primary.scss file AND
 *   _sign-in.scss file.
 * The font is a random number because they said match it with production
 *  ignore standards.
 */
/* Signin menu color */
/* Secondary header toggle */
/* Secondary header color */
/**
 * Base padding-left.
 * This is used on most elements for padding left for alignment.
 */
/**
* The language toggle section in the primary navigation.
*/
.language-toggle {
  padding: 1em 2em;
  border-top: 0.125rem solid #FEFEFE;
  /**
    * The language toggle heading.
    */
  /**
    * 1. Wrap the country sections as the screen gets smaller.
    */
  /**
    * The country list item.
    */
  /* TODO: add is-active inside button */
  /**
    * Default button layout in mobile is stacking. However we need to present a row style (2 button per row).
    */
  /**
    * The actual toggle links.
    */
  /**
    * The country flags
    */ }
  @media screen and (min-width: 46rem) {
    .language-toggle {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      background-color: #f5f6f7;
      border: none;
      z-index: 1;
      /**
        * Hide unopened language toggles.
        */ }
      .is-open > .language-toggle,
      .no-js .language-toggle__toggle:hover + .language-toggle,
      .no-js .language-toggle:hover {
        display: block;
        z-index: 10; } }
  @media screen and (min-width: 46rem) {
    .language-toggle__wrapper {
      display: flex;
      margin-left: auto;
      margin-right: auto;
      max-width: 75rem; } }
  .language-toggle__nav {
    margin-left: auto; }
    .language-toggle__nav.region {
      border-left: 1px solid #e6e6e6; }
  .language-toggle__heading {
    color: #FEFEFE;
    font-weight: 300;
    /**
        * The region headings:
        *   US
        *   Canada
        *   China
        */ }
    @media screen and (min-width: 46rem) {
      .language-toggle__heading {
        margin-right: 0.5em;
        color: #001928; } }
    @media screen and (max-width: 45.9375rem) {
      .language-toggle__heading {
        line-height: 1em; } }
    .language-toggle__heading--region {
      font-weight: 700; }
  .language-toggle__countries {
    font-weight: 700; }
    @media screen and (min-width: 46rem) {
      .language-toggle__countries {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        /* 1 */ } }
  .language-toggle__country {
    margin-bottom: 1em; }
    .language-toggle__country:first-child {
      margin-top: 1em; }
    @media screen and (min-width: 46rem) {
      .language-toggle__country {
        display: flex;
        margin-bottom: 0;
        align-items: baseline;
        margin-left: 1em; }
        .language-toggle__country:first-child {
          margin-top: 0; } }
  .language-toggle__region-image {
    margin-right: 1em; }
  .language-toggle__languages {
    display: flex;
    margin-top: 1em; }
    @media screen and (max-width: 45.9375rem) {
      .language-toggle__languages {
        flex-wrap: wrap; } }
    @media screen and (min-width: 46rem) {
      .language-toggle__languages {
        margin-top: 0; } }
  .language-toggle__button {
    display: flex;
    align-items: center;
    padding: 0 1em;
    border-radius: 5em;
    text-align: center;
    transition: background-color .3s ease,color .3s ease,border-color .3s ease;
    max-width: 90vw; }
    @media screen and (max-width: 45.9375rem) {
      .language-toggle__button {
        padding: 0;
        text-align: left;
        width: 100%; }
        .language-toggle__button a {
          display: inline-block;
          background-color: #0075BE;
          color: #fff;
          padding: .6em 2em;
          border: .0625rem solid #fff;
          border-radius: 5em; } }
    .language-toggle__button .lang-toggle-alt-style--button {
      padding: .6em 2em;
      border: .0625rem solid #0075BE;
      border-radius: 5em; }
    .language-toggle__button .lang-toggle-alt-style--button-rev {
      padding: .6em 2em;
      border: .0625rem solid #fff;
      border-radius: 5em; }
  .language-toggle__button_active {
    display: inline-block;
    padding: .6em 1em;
    border-radius: 5em;
    text-align: center;
    transition: background-color .3s ease,color .3s ease,border-color .3s ease;
    max-width: 90vw;
    border: 0.125rem solid #0075BE;
    background: #0075BE;
    color: #fff; }
    .language-toggle__button_active a {
      color: #fff; }
    .language-toggle__button_active a:hover {
      text-decoration: underline !important;
      color: #fff; }
    @media screen and (max-width: 45.9375rem) {
      .language-toggle__button_active {
        padding: 0;
        text-align: left;
        width: 100%;
        border: none; }
        .language-toggle__button_active a {
          display: inline-block;
          background-color: #fff;
          color: #0075BE;
          padding: .6em 2em;
          border: .0625rem solid #fff;
          border-radius: 5em; } }
    @media screen and (min-width: 46rem) {
      .language-toggle__button_active a:focus {
        color: #fff; } }
  @media screen and (max-width: 45.9375rem) {
    .language-toggle__language {
      margin-bottom: 0.5em; } }
  .language-toggle__no-stack .language-toggle__country ul > li {
    width: 50%; }
  .language-toggle__link {
    margin-right: 1em; }
    @media screen and (min-width: 46rem) {
      .language-toggle__link {
        margin-right: 0; } }
  .language-toggle__wealth-list-style {
    padding: 2px 2px 2px 7px; }
  .language-toggle__wealth-active {
    background: white;
    font-weight: 600; }
  .language-toggle__flag {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-left: -24px !important;
    margin-top: -5px !important;
    padding-left: 30px; }
  .language-toggle__flag-none {
    vertical-align: middle;
    margin-left: -24px !important;
    margin-top: -5px !important;
    padding-left: 30px; }
  .language-toggle__flag-ca {
    background: url(https://www.bmo.com/resources/icons/countries.png);
    background-position: 0 -48px;
    background-repeat: no-repeat; }
  .language-toggle__flag-us {
    background: url(https://www.bmo.com/resources/icons/countries.png);
    background-position: 0 -144px;
    background-repeat: no-repeat; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Megamenu Settings
 * namespace: $megamenu-
 * scope: @global.
 */
/* Max width */
/**
 * Root level link
 * These are used for th eroot level links.
 * There are declarations in the _primary.scss file AND
 *   _sign-in.scss file.
 * The font is a random number because they said match it with production
 *  ignore standards.
 */
/* Signin menu color */
/* Secondary header toggle */
/* Secondary header color */
/**
 * Base padding-left.
 * This is used on most elements for padding left for alignment.
 */
/**
 * 1. Take up the remaining space.
 */
.primary-header {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: initial;
  /* 1 */
  justify-content: center;
  /**
   * 1. Serve as anchor for medium screens.
   */
  /**
   * 1. Space it away from the toggle button if present.
   */
  /**
   * Wraps the primary header.
   */
  /**
   * Root level links in the primary header are what give the header the correct size.
   */ }
  @media print, screen and (max-width: 45.99875em) {
    .primary-header {
      margin-left: 5.5em;
      height: 5rem; } }
  @media print, screen and (min-width: 46em) {
    .primary-header {
      position: relative;
      background-color: #0075BE; } }
  .secondary-header__toggle + .primary-header {
    margin-left: 0.5em;
    /* 1 */
    /**
     * The toggle is hidden in medium.
     */ }
    @media print, screen and (min-width: 46em) {
      .secondary-header__toggle + .primary-header {
        margin-left: 0; } }
  .primary-header__right {
    display: flex; }
  .primary-header__wrapper {
    display: flex;
    flex: 1;
    max-width: 75rem;
    align-items: center; }
    @media print, screen and (min-width: 46em) and (max-width: 63.93625em) {
      .primary-header__wrapper {
        justify-content: space-between; } }
    @media print, screen and (min-width: 63.9375em) {
      .primary-header__wrapper {
        flex: 1 1 75rem; } }
  .primary-header__root-link {
    position: relative !important;
    font-size: 0.8125rem !important;
    padding: 1.25em 1em;
    line-height: 13px !important;
    /**
     * Primary heading is smaller on tablet.
     * 1. Since the primary header is blue on medium up,
     * the root links must be white.
     */ }
    .primary-header__root-link, .primary-header__root-link:hover, .primary-header__root-link:focus {
      color: #001928; }
    .primary-header__root-link.no-border {
      border: none; }
    @media print, screen and (min-width: 46em) {
      .primary-header__root-link {
        padding: 1.25em 1em;
        font-weight: 700;
        /**
       * For large screens space out the links.
       * Theres not enough space on medium so leave as is for those.
       */ }
        .primary-header__root-link, .primary-header__root-link:hover, .primary-header__root-link:focus {
          color: #FEFEFE;
          /* 1 */ }
        .primary-header__root-link--spaced {
          margin-left: 1em;
          padding-left: 6.5px; } }
    @media print, screen and (min-width: 46em) and (min-width: 46em) and (max-width: 63.93625em) {
      .primary-header__root-link--spaced {
        margin-left: 0.4em; } }
    @media print, screen and (min-width: 46em) and (max-width: 63.93625em) {
      .primary-header__root-link {
        padding-left: 0.5em !important;
        padding: 1.25em 0.5em; } }
  .primary-header__locator {
    display: flex;
    flex-direction: column; }
    @media print, screen and (min-width: 46em) {
      .primary-header__locator {
        display: inline-block; } }

@media print, screen and (min-width: 46em) and (min-width: 46em) {
  .primary-header__toggle_no_tri {
    position: relative;
    padding-right: 1em;
    /**
         * 1. Magical number but because of time constraints I dont have time to do the math.
         */ }
    .primary-header__toggle_no_tri--spaced {
      padding-right: 1.5em; }
    .primary-header__toggle_no_tri span {
      display: flex; }
    .primary-header__toggle_no_tri::after {
      /**
   * Default transforms for the `down` position.
   */
      /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-left: 0.125rem solid #FEFEFE;
      border-top: 0.125rem solid #FEFEFE;
      transform-origin: 0 0;
      transform: rotate(225deg) translate(-80%, -100%);
      position: absolute;
      top: 40%;
      /* 1 */
      right: 0; }
      .is-open .primary-header__toggle_no_tri::after {
        /**
   * Default transforms for the `down` position.
   */
        /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-left: 0.125rem solid #FEFEFE;
        border-top: 0.125rem solid #FEFEFE;
        transform-origin: 0 0;
        transform: rotate(45deg) translate(0, 20%); }
    .primary-header__toggle_no_tri--light-bg::after {
      /**
   * Default transforms for the `down` position.
   */
      /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-left: 0.125rem solid #0075BE;
      border-top: 0.125rem solid #0075BE;
      transform-origin: 0 0;
      transform: rotate(225deg) translate(-80%, -100%);
      right: 0.1em;
      top: 30%; }
    .primary-header__toggle_no_tri--flip-chevron::after {
      /**
   * Default transforms for the `down` position.
   */
      /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-left: 0.125rem solid #0075BE;
      border-top: 0.125rem solid #0075BE;
      transform-origin: 0 0;
      transform: rotate(45deg) translate(0, 20%); }
    .primary-header__toggle_no_tri--attention {
      /**
           * The before pseudo just contains the red bubble around the chevron.
           * 1. Reset the default ::before styles.
           */
      /**
           * 1. Magical number but because of time constraints I dont have time to do the math.
           * 2. See number 1.
           *      TODO: There has to be a better way to do these chevrons. FIND IT.
           *            Currently not the most flexible solution.
           */ }
      .primary-header__toggle_no_tri--attention::before {
        content: "";
        display: block;
        position: absolute;
        width: auto;
        /* 1 */
        height: auto;
        /* 1 */
        top: 50%;
        left: auto;
        /* 1 */
        right: 0;
        padding: 1em;
        background: #c81414;
        border: 0.125rem solid #c81414;
        border-radius: 50%;
        transform: translate(50%, -50%);
        /* 1 */ }
      .primary-header__toggle_no_tri--attention::after {
        top: 40%;
        /* 1 */
        right: 0;
        margin-right: -0.5em;
        /* 2 */ }
        .is-open .primary-header__toggle_no_tri--attention::after {
          top: 42%;
          /* 1 */ } }
  @media print, screen and (min-width: 46em) {
    .primary-header__toggle {
      position: relative;
      padding-left: 6.5px;
      padding-right: 1em;
      /**
       * 1. Magical number but because of time constraints I dont have time to do the math.
       */ }
      .primary-header__toggle--spaced {
        padding-right: 1.5em; }
      .primary-header__toggle::before {
        content: "";
        display: none;
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        margin: 0px;
        border-radius: 0px;
        background-color: #f5f6f7; }
        .is-open .primary-header__toggle::before {
          display: block; }
      .primary-header__toggle span {
        display: flex; }
      .primary-header__toggle::after {
        /**
   * Default transforms for the `down` position.
   */
        /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-left: 0.125rem solid #FEFEFE;
        border-top: 0.125rem solid #FEFEFE;
        transform-origin: 0 0;
        transform: rotate(225deg) translate(-80%, -100%);
        position: absolute;
        top: 40%;
        /* 1 */
        right: 0; }
        .is-open .primary-header__toggle::after {
          /**
   * Default transforms for the `down` position.
   */
          /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
          content: "";
          display: inline-block;
          width: 0.5em;
          height: 0.5em;
          border-left: 0.125rem solid #FEFEFE;
          border-top: 0.125rem solid #FEFEFE;
          transform-origin: 0 0;
          transform: rotate(45deg) translate(0, 20%); }
      .primary-header__toggle--light-bg::after {
        /**
   * Default transforms for the `down` position.
   */
        /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-left: 0.125rem solid #0075BE;
        border-top: 0.125rem solid #0075BE;
        transform-origin: 0 0;
        transform: rotate(225deg) translate(-80%, -100%);
        right: 0.1em;
        top: 30%; }
      .primary-header__toggle--flip-chevron::after {
        /**
   * Default transforms for the `down` position.
   */
        /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-left: 0.125rem solid #0075BE;
        border-top: 0.125rem solid #0075BE;
        transform-origin: 0 0;
        transform: rotate(45deg) translate(0, 20%); }
      .primary-header__toggle--attention {
        /**
         * The before pseudo just contains the red bubble around the chevron.
         * 1. Reset the default ::before styles.
         */
        /**
         * 1. Magical number but because of time constraints I dont have time to do the math.
         * 2. See number 1.
         *      TODO: There has to be a better way to do these chevrons. FIND IT.
         *            Currently not the most flexible solution.
         */ }
        .primary-header__toggle--attention::before {
          content: "";
          display: block;
          position: absolute;
          width: auto;
          /* 1 */
          height: auto;
          /* 1 */
          top: 50%;
          left: auto;
          /* 1 */
          right: 0;
          padding: 1em;
          background: #c81414;
          border: 0.125rem solid #c81414;
          border-radius: 50%;
          transform: translate(50%, -50%);
          /* 1 */ }
        .primary-header__toggle--attention::after {
          top: 40%;
          /* 1 */
          right: 0;
          margin-right: -0.5em;
          /* 2 */ }
          .is-open .primary-header__toggle--attention::after {
            top: 42%;
            /* 1 */ } }
  .primary-header .small-margin-left--half {
    margin-left: .5rem; }
  .primary-header .small-margin-top--0 {
    margin-top: 0; }
  .primary-header .small-margin-left--0 {
    margin-left: 0; }
  .primary-header .small-margin-right--0 {
    margin-right: 0; }
  .primary-header .small-margin-bottom--0 {
    margin-bottom: 0; }
  .primary-header .small-margin-left--half {
    margin-left: .5rem; }
  .primary-header .small-margin-right--half {
    margin-right: .5rem; }
  .primary-header .small-margin--0 {
    margin: 0; }
  .primary-header .small-align--center {
    align-items: center; }
  @media print, screen and (max-width: 45.99875em) {
    .primary-header .small-only-display--flex {
      display: flex; }
    .primary-header .small-only-flex-direction--column {
      flex-direction: column; }
    .primary-header .small-only-flex-align-items--center {
      align-items: center; }
    .primary-header .small-only-padding--1-and-1-fourth {
      padding: 1.25em; }
    .primary-header .small-only-padding-bottom--1 {
      padding-bottom: 1rem; }
    .primary-header .small-only-padding-left--1 {
      padding-left: 1rem; }
    .primary-header .small-only-padding-left--0 {
      padding-left: 0; } }
  @media print, screen and (min-width: 46em) {
    .primary-header .medium-flex-wrap--nowrap {
      flex-wrap: nowrap; } }

.location__icon {
  margin-bottom: 0.25em; }

/**
* The secondary nav logo is on the inside of the blue on mobile and outside on tablet / desktop.
*
* 1. The image size does not reflect the design, until we get the correct image this needs to stay.
*/
.secondary-header__logo {
  display: block;
  padding-top: 1.5em;
  padding-right: 2em;
  padding-bottom: 1.5em;
  padding-left: 2em;
  width: 18em;
  /**
	* ie11 doesnt adhere to the max-width: 100% on all img tags.
	* This browserhack targets ie11 specifically.
	* TODO: Find better solution
	*/
  /* stylelint-disable selector-no-universal */
  /* disable stylelint since this is a browserhack. */
  /* stylelint-enable selector-no-universal */
  /**
	* 1. Align the logo with the Choose site text
	*/ }
  .secondary-header__logo *::-ms-backdrop,
  .secondary-header__logo img {
    max-width: 18em; }
  @media print, screen and (min-width: 46em) and (max-width: 63.93625em) {
    .secondary-header__logo {
      margin-left: auto;
      margin-right: auto; } }
  @media print, screen and (min-width: 63.9375em) {
    .secondary-header__logo {
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 1em;
      /* 1 */ } }

/**
* The primary menu logo.
* 1. Its usually an anchor so set the display correctly.
* 2. Logo is the only thing on the left.
*/
.primary-header__logo {
  display: block;
  /* 1 */
  margin-right: auto;
  /* 2 */
  max-width: 5em;
  /**
	 * Logo only appears on mobile.
	 */ }
  @media print, screen and (min-width: 46em) {
    .primary-header__logo {
      display: none; } }

/**
 * The Primary header link item styles.
 */
.blue-bar-height-fix {
  height: 44px; }

.item-width-0 {
  display: inline-block;
  width: 0;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  font-family: heebo-medium;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 21px;
  padding-top: 0;
  padding-left: 10px; }

.icon-hover-action:hover > span.item-width-0 {
  width: 85px; }

.tl-header-primary-right.wordwrap-normal {
  white-space: nowrap; }

.signin-text-bold {
  font-weight: 700 !important; }

/* this overrides core css, hard-coded values for design QA */
.icon-hover-action.icon:before {
  font-weight: bold !important; }

.tl-header-primary-right > li a .iconNew.icon-hover-action, .tl-header-signin i > svg.lock-icon {
  margin-right: 0px;
  margin-top: 0px; }

.icon-hover-action.iconNew, .icon-hover-action.iconNew:hover {
  text-decoration: none !important;
  display: flex;
  align-items: center; }

.tl-header-primary-right > li a span.heebo {
  font-family: "Heebo";
  font-weight: 500; }

.tl-header-primary-right > li button span.heebo {
  font-family: "Heebo";
  font-weight: 500;
  text-align: left; }

.tl-header-primary-right > li a.no-spacing {
  padding-right: 0;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0; }

.tl-header-primary-right > li a:hover {
  text-decoration: none; }

.tl-header-primary-right > li button:hover {
  text-decoration: none; }

span.heebo.login-text {
  padding-top: 2px !important; }

a.no-spacing.en-tag span {
  padding-top: 3px; }

.no-red.chevy:before {
  color: #ffffff; }

.chevy:before, .no-red.chevy:before {
  font-size: 10px !important;
  font-weight: bold; }

.tl-header-primary-right > li a.tl-header-signin .iconNew.chevron-down.no-red, .tl-header-primary-right > li a.tl-header-signin.tl-header-active .iconNew.chevron-down.no-red {
  background-color: transparent; }

.tl-header-primary-right > li {
  line-height: 0; }

.tl-header-primary-right .language-toggle {
  line-height: 1.4; }

button.language-toggle__toggle {
  padding-left: 13px; }

button.search-form__toggle {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 0px; }

.icon-hover-action svg {
  box-sizing: content-box; }

header .margin-left-auto {
  margin-left: auto; }

header .fix-85 {
  width: 85px; }

header .fix-auto {
  width: auto !important; }

header .margin-bottom-5 {
  margin-bottom: 5px !important; }

header .padding-top-12 {
  padding-top: 12px !important; }

header .padding-left-22 {
  padding-left: 22px !important; }

header .padding-right-22 {
  padding-right: 22px !important; }

header .padding-left-26 {
  padding-left: 26px !important; }

header .font-weight-400 {
  font-weight: 400 !important; }

header .font-weight-700 {
  font-weight: 700 !important; }

header .font-size-13 {
  font-size: 13px; }

header .width-100 {
  width: 100%; }

header .tl-header-primary-right a .existing-icon:before {
  content: "\E669";
  color: #ffffff;
  font-family: "bmo-icon";
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-align: center;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; }

header .tl-header-primary-right a .existing-icon.iconNew:before {
  line-height: 30px;
  font-size: 30px;
  color: black; }
  @media print, screen and (min-width: 46em) {
    header .tl-header-primary-right a .existing-icon.iconNew:before {
      color: #ffffff;
      line-height: 18px;
      font-size: 18px; } }

header .tl-header-primary-right button .magnifying-glass:before {
  content: "\E640";
  color: #ffffff;
  line-height: 18px;
  font-size: 18px;
  font-family: "bmo-icon";
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-align: center;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; }

header .tl-header-primary-right button .chevron-down:before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-left: 0.125rem solid #FEFEFE;
  border-top: 0.125rem solid #FEFEFE;
  transform-origin: 0 0;
  transform: rotate(225deg) translate(-80%, -100%);
  position: absolute;
  top: 40%;
  right: 2px; }

header .tl-header-primary-right a.tl-header-signin {
  font-size: 0.866em;
  padding: 0 15px; }
  @media print, screen and (min-width: 46em) {
    header .tl-header-primary-right a.tl-header-signin {
      display: block;
      text-align: center;
      height: 44px;
      color: #ffffff;
      background-color: #1d4e75; } }
  header .tl-header-primary-right a.tl-header-signin:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle; }
  header .tl-header-primary-right a.tl-header-signin > span.hide-for-small-only {
    padding: 1px 0;
    border-top: 1px solid #1d4e75;
    border-bottom: 1px solid #1d4e75;
    display: inline-block;
    vertical-align: middle; }
  header .tl-header-primary-right a.tl-header-signin .iconNew.chevron-right {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ed1b24;
    vertical-align: middle;
    margin: 0 0 0 9px;
    padding: 0 0 0 2px; }
    header .tl-header-primary-right a.tl-header-signin .iconNew.chevron-right:before {
      content: "\E60F";
      font-size: 10px;
      color: #ffffff;
      font-family: "bmo-icon";
      width: 19px;
      padding: 0 1px 0 0;
      vertical-align: middle;
      line-height: 20px;
      text-decoration: none !important; }
  header .tl-header-primary-right a.tl-header-signin:active, header .tl-header-primary-right a.tl-header-signin:hover {
    outline: 0;
    text-decoration: none; }
    header .tl-header-primary-right a.tl-header-signin:active > span.hide-for-small-only > span:not(.iconNew), header .tl-header-primary-right a.tl-header-signin:hover > span.hide-for-small-only > span:not(.iconNew) {
      border: none;
      text-decoration: underline; }
  header .tl-header-primary-right a.tl-header-signin:focus > span.hide-for-small-only {
    outline: 1px dotted #ffffff; }

header .tl-header-primary-right a.tl-header-lang-toggle .iconNew.globe:before {
  content: "\E624";
  line-height: 30px;
  font-size: 30px;
  color: #414141;
  font-family: "bmo-icon"; }

header .iconNew {
  position: initial;
  top: auto;
  left: auto;
  transform: initial;
  -webkit-transform: initial; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Megamenu Settings
 * namespace: $megamenu-
 * scope: @global.
 */
/* Max width */
/**
 * Root level link
 * These are used for th eroot level links.
 * There are declarations in the _primary.scss file AND
 *   _sign-in.scss file.
 * The font is a random number because they said match it with production
 *  ignore standards.
 */
/* Signin menu color */
/* Secondary header toggle */
/* Secondary header color */
/**
 * Base padding-left.
 * This is used on most elements for padding left for alignment.
 */
/**
 * The signin component is located in the primary menu.
 */
.signin {
  /**
     * 1. Provide anchor for the sign-in drawer.
     */
  /**
     * The actual sign-in anchor.
     * 1. The sign in toggle is the last root link, add more space to the right.
     */
  /**
     * The signin links reset default link colors.
     */
  /**
     * The icon breaks the sizing of all root level links because its too big.
     * Because of this is must be absolutely positioned to avoid any issues with size.
     */
  /**
     * The wrapper around the signin navigation.
     */ }
  .signin a {
    font-size: 0.8125rem; }
    .signin a, .signin a:hover, .signin a:focus {
      color: #001928; }
    @media screen and (min-width: 46rem) {
      .signin a {
        color: #FEFEFE; }
        .signin a, .signin a:hover, .signin a:focus {
          color: #FEFEFE; } }
  @media screen and (min-width: 46rem) {
    .signin > .signin__toggle {
      padding-right: 2em; } }
  .signin icon {
    padding: 0.75em; }
  @media screen and (min-width: 46rem) {
    .signin {
      position: relative;
      /* 1 */ } }
  .signin__toggle {
    padding: 1.25em 1em;
    flex-direction: column;
    font-weight: 400; }
    @media screen and (min-width: 46rem) {
      .signin__toggle {
        padding-right: 2em;
        flex-direction: row; } }
  .signin__toggle-icon-right::after {
    transform: rotate(135deg) translate(-80%, -100%);
    top: 48%;
    right: .5em; }
  @media screen and (min-width: 46rem) {
    .signin__heading {
      padding-right: 1.5em;
      padding-left: 2em;
      background-color: #005587; } }
  @media screen and (min-width: 46rem) {
    .signin__heading-nd {
      padding-right: 1em;
      padding-left: 30px;
      background-color: #005587; } }
  .signin__heading-nd button, .signin__heading-nd > a {
    margin-top: 5px;
    font-weight: 400 !important; }
    @media screen and (min-width: 46rem) {
      .signin__heading-nd button, .signin__heading-nd > a {
        margin-top: 0;
        font-weight: 700 !important;
        padding-right: 20px !important; } }
  @media screen and (max-width: 45.9375rem) {
    .signin__icon-flex {
      flex-direction: column;
      display: flex;
      align-items: center;
      line-height: 24px; } }
  .signin__item {
    /**
       * The signin item after a signin attention.
       * 1. Equalize the padding between the --attention padding bottom.
       */ }
    .signin__item--attention + .signin__item .signin__link {
      padding-top: 1.5em;
      /* 1 */ }
  .signin__link {
    display: block;
    padding-top: 0.75em;
    padding-right: 2em;
    padding-left: 2em;
    padding-bottom: 0.75em; }
    .signin__link, .signin__link:hover, .signin__link:focus {
      color: #FEFEFE; }
      @media screen and (min-width: 46rem) {
        .signin__link, .signin__link:hover, .signin__link:focus {
          color: #FEFEFE; } }
    .signin__link.heading__link {
      padding-top: 0;
      padding-bottom: 10px; }
    .signin__link--attention {
      color: #FEFEFE;
      font-weight: 700;
      width: 85%;
      background: none;
      text-align: center;
      margin: auto;
      margin-bottom: 1em;
      padding: 1em 2em;
      border: 0.125em solid #FEFEFE;
      border-radius: 5em;
      box-sizing: border-box; }
      @media screen and (min-width: 46rem) {
        .signin__link--attention {
          border: 0 solid transparent;
          text-align: left;
          margin: 0;
          padding-top: 1.5em;
          padding-bottom: 1.5em;
          font-weight: 700;
          border: 0;
          border-bottom: 0.0625rem solid rgba(217, 220, 225, 0.5);
          border-radius: 0; } }
      .signin__link--attention-with-subtext {
        /* Override normal spacing */
        padding-bottom: 1em; }
        @media screen and (min-width: 46rem) {
          .signin__link--attention-with-subtext {
            /* The border will now be on the subtext */
            border-bottom: 0 solid transparent; } }
    .signin__link--subtext {
      /* To override normal spacing */
      padding-top: 0;
      padding-bottom: 1.5em;
      /* The container stretches to the text so we need to wrap it */
      max-width: 42em;
      white-space: normal;
      /* The half size is because of the font-size being smaller effecting the em */
      padding-left: 2.5em;
      border-bottom: 0.0625rem solid rgba(217, 220, 225, 0.5); }
  .signin__icon {
    margin-bottom: 0.25em;
    padding-right: 1.25em 1em; }
    @media screen and (min-width: 46rem) {
      .signin__icon {
        position: absolute;
        margin-bottom: 0;
        margin-top: -4px;
        left: 0;
        transform: translateX(-100%); } }
    @media screen and (max-width: 45.9375rem) {
      .signin__icon {
        padding-bottom: 9px !important;
        margin-right: 0px !important;
        margin-bottom: 4px !important; } }
  .signin__chevron {
    box-sizing: content-box;
    height: 1em;
    width: 1em;
    min-width: 1em;
    min-height: 1em;
    max-width: 1em;
    max-height: 1em; }
  .signin__nav {
    position: absolute;
    padding-top: 1em;
    padding-bottom: 1em;
    top: 5rem;
    left: 0;
    right: 0;
    background-color: #005587;
    /**
       * 1. Offset the border-width used throughout megamenu sotheres no 'break' in design.
       * 2. Nowrap ensures that the sign-in drawer takes up as much space as it needs for the links.
       *     The only other alternative is setting min-width which is not a good solution.
       */
    /**
       * When javascript isnt loaded open on hover
       */ }
    @media screen and (max-width: 45.9375rem) {
      .signin__nav {
        z-index: 999; } }
    @media screen and (min-width: 46rem) {
      .signin__nav {
        z-index: 1002; } }
    .signin__nav a {
      font-size: 1rem; }
      .signin__nav a, .signin__nav a:hover, .signin__nav a:focus {
        color: #FEFEFE; }
    .signin__nav a:hover {
      text-decoration: underline !important; }
    .signin__nav .fine-print {
      font-size: .85rem; }
      .signin__nav .fine-print a {
        font-size: .85rem; }
    @media screen and (min-width: 46rem) {
      .signin__nav {
        top: 100%;
        /* 1 */
        padding-top: 0;
        left: auto;
        white-space: nowrap;
        z-index: 1000;
        background-color: #005587; } }
    .no-js .signin:hover > .signin__nav {
      display: block;
      z-index: 1000; }
  .signin--nested {
    /**
      *Setting basic width of nested signin for desktop to 42em
      */ }
    @media screen and (min-width: 46rem) {
      .signin--nested {
        min-width: 42em; }
        .signin--nested.bh {
          min-width: 47em; } }
    .signin--nested__nav {
      padding: 0; }
    .signin--nested__heading {
      padding: 1em;
      font-weight: bold; }
      .signin--nested__heading:hover, .signin--nested__heading:focus, .signin--nested__heading.active {
        color: #001928;
        text-decoration: none; }
        @media screen and (max-width: 45.9375rem) {
          .signin--nested__heading:hover, .signin--nested__heading:focus, .signin--nested__heading.active {
            color: #FEFEFE; } }
    .signin--nested__link {
      padding: .5em 0; }
    .signin--nested__icon-flip .icon__icon--chevron-right {
      transform: rotate(90deg); }
    .signin--nested-mobile-hide {
      display: none; }
      @media screen and (min-width: 46rem) {
        .signin--nested-mobile-hide {
          display: block; } }
    .signin--nested-mobile-list {
      padding: 0 2em; }
  .signin .signin-border-bottom {
    border-bottom: 0.0625rem solid rgba(217, 220, 225, 0.5); }
  .signin .font-size--16 {
    font-size: 16px; }

.signin__chevron svg {
  margin-top: 7px; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Icons SVG's no longer icon fonts.
 * To scale an icon set the font-size of the element with the 'icon' class.
 * DO NOT mess arround with the width/height/padding values.
 *   These are set the ration of the icons ONLY the rest is done using:
 *     color
 *     fill
 *     stroke
 *     border
 *     background
 *
 * 1. Set the ratio between padding and width/height.
 *     The size of the icon will always be controlled with 'font-size'.
 * 2. Set the ratio of padding to size
 * 3. Ensure the icon is always centered
 */
/**
 * Icons scale weird.
 * Sometimes it makes the width/height not be the same.
 * This mixin forces it to be the same always.
 */
 {
  /**

    <i> is now the wrapper for icons.

    **/
  /**

        There is no more .icon (attached to the wrapper <span>) anymore.  The style below .icon won't do anything ATM.

    **/ }
  header i, footer i {
    display: flex;
    justify-content: center;
    align-items: center; }
  header .icon, footer .icon {
    /* 1 */
    /* 1 */
    display: inline-flex;
    /* 3 */
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    max-width: 2em;
    max-height: 2em;
    /* 2 */
    padding: 0.35em;
    /* 2 */
    justify-content: center !important;
    /* 3 */
    align-items: stretch !important;
    /* 3 */
    /**
        * 1. Flex grow 1 makes sure the icon takes up the whole space.
        *     NOTE: The svg must be the ONLY child of the icon container.
        */
    /**
        * The wrapper is needed sometimes to be given to the icon parent.
        * It is used to align the text and icon together.
        * Usually used on an anchor or paragraph.
        */
    /**
        * The bare icon is taken up 100% by the icon image.
        * It has no special width / height / or padding.
        */
    /**
        * The icon--left means the icon is on the left of text.
        * So it adds margin to the right to separate itself from the text.
        */
    /**
    * The icon--right means the icon is on the right of text.
    * So it adds margin to the right to separate itself from the text.
    */
    /**
    * An icon with a background and border.
    * Set the icon color to change the background and border colors.
    * 1. The border-with should be `1px` but in em.
    *     This is because depending on the icon font size the border should be thicker/skinnier.
    */
    /**
    * A disabled icon.
    */
    /**
    * A dark icon.
    *   TODO: Find out what the dark color is
    */
    /**
    * A white icon.
    *   TODO: Find out what the white color is
    */
    /**
    * The icon--link variation is used usually within links.
    * Normally the outline is `disabled`, when the link is hoeverd
    * then the border `enables`
    */
    /**
    * An icon used for CTA's, usually white with blue background.
    */
    /**
    * The reverse CTA icon is the opossite of the cta one above.
    * It is usually used when the icon is on a dark background.
    */
    /**
    * TODO: Dont use spacing to declare font-size.
    */
    /**
        * The large variant of the icon.
        */
    /*
        * The footer icon variation is used for the primary footer.
        * It's a pretty specific case so the choice of naming it `--footer` was made.
        * If this becomes more of a standard maybe concider renaming it to something else.
        */
    /* Some icons renders really "thick". Thus we need to apply stroke-opacity: 0. */ }
    header .icon--blue path, footer .icon--blue path {
      fill: #0075be; }
    header .icon--nav, footer .icon--nav {
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 24px;
      margin-top: 1px; }
    header .icon > svg, footer .icon > svg {
      flex-grow: 1; }
    header .icon path, footer .icon path {
      color: inherit;
      fill: currentColor;
      stroke: currentColor; }
    header .icon__wrapper, footer .icon__wrapper {
      display: flex;
      align-items: center;
      /**
        * Sets the icon and the text apart from each other.
        */
      /**
        * Inline variation of the icon wrapper.
        * Usually used on links.
        */ }
      header .icon__wrapper--apart, footer .icon__wrapper--apart {
        display: flex;
        align-items: center;
        justify-content: space-between; }
      header .icon__wrapper--inline, footer .icon__wrapper--inline {
        display: inline-flex; }
      header .icon__wrapper--top, footer .icon__wrapper--top {
        align-items: flex-start; }
    header .icon--bare, footer .icon--bare {
      width: 1em;
      height: 1em;
      min-width: 1em;
      min-height: 1em;
      max-width: 1em;
      max-height: 1em;
      padding: 0; }
      header .icon--bare-grey, footer .icon--bare-grey {
        width: 1em;
        height: 1em;
        min-width: 1em;
        min-height: 1em;
        max-width: 1em;
        max-height: 1em;
        padding: 0;
        color: #929ba9; }
    header .icon--left, footer .icon--left {
      margin-right: 1em; }
      header .icon--left-small, footer .icon--left-small {
        margin-right: 0.5em; }
    header .icon--right, footer .icon--right {
      margin-left: 1em; }
      header .icon--right-small, footer .icon--right-small {
        margin-left: 0.5em; }
    header .icon--circle, footer .icon--circle {
      border: 0.0625rem solid currentColor;
      border-radius: 50%; }
      header .icon--circle-grey, footer .icon--circle-grey {
        border: 0.0625rem solid #929ba9; }
      header .icon--circle-smaller, footer .icon--circle-smaller {
        padding: 0.5em; }
      header .icon--circle-large, footer .icon--circle-large {
        width: 4em;
        height: 4em;
        min-width: 4em;
        min-height: 4em;
        max-width: 4em;
        max-height: 4em;
        /* 2 */
        padding: 0.7em;
        /* 2 */ }
        header .icon--circle-large-icon, footer .icon--circle-large-icon {
          height: 2em;
          width: 2em;
          margin-top: 0.25em; }
      header .icon--circle-white, footer .icon--circle-white {
        background: #FEFEFE; }
    header .icon--disabled, footer .icon--disabled {
      color: #929ba9; }
    header .icon--dark, footer .icon--dark {
      color: black; }
      header .icon--dark::before, footer .icon--dark::before {
        color: black; }
    header .icon--white, footer .icon--white {
      color: #FEFEFE; }
    header .icon--link, footer .icon--link {
      border-color: #929ba9; }
      a:hover header .icon--link,
      a:focus header .icon--link, a:hover footer .icon--link,
      a:focus footer .icon--link {
        border-color: currentColor; }
    header .icon--cta, footer .icon--cta {
      background: #0075BE;
      color: #FEFEFE;
      border-color: #0075BE; }
      header .icon--cta--attention, footer .icon--cta--attention {
        background-color: #c81414;
        color: #FEFEFE;
        border-color: #c81414; }
    header .icon--thin, footer .icon--thin {
      stroke-opacity: 0;
      stroke-width: 0; }
    header .icon--reverse-cta, footer .icon--reverse-cta {
      background: #FEFEFE;
      color: #0075BE;
      border-color: #FEFEFE; }
    header .icon--small, footer .icon--small {
      font-size: 0.75em; }
    header .icon--smaller, footer .icon--smaller {
      font-size: 0.6em; }
    header .icon--x-small, footer .icon--x-small {
      font-size: 0.5em; }
    header .icon--large, footer .icon--large {
      font-size: 1.25em; }
    header .icon--x-large, footer .icon--x-large {
      font-size: 1.5em; }
    header .icon--xx-large, footer .icon--xx-large {
      font-size: 2em; }
    header .icon--unit-3x, footer .icon--unit-3x {
      font-size: 3em; }
    header .icon--xxx-large, footer .icon--xxx-large {
      font-size: 5em; }
    header .icon--footer, footer .icon--footer {
      transition: color 300ms ease, background-color 300ms ease; }
      header .icon--footer:hover, footer .icon--footer:hover {
        background-color: #FEFEFE;
        color: #0075BE; }
    header .icon--chevron, footer .icon--chevron {
      display: inline-flex;
      align-items: center; }
    header .icon--chevron-right > svg, footer .icon--chevron-right > svg {
      transform: translateX(5%); }
    header .icon__icon--calender, header .icon__icon--locate, header .icon__icon--call, footer .icon__icon--calender, footer .icon__icon--locate, footer .icon__icon--call {
      stroke-opacity: 0; }
    header .icon__icon--mortgage-compare rect, footer .icon__icon--mortgage-compare rect {
      stroke-opacity: 1;
      stroke: currentColor; }

header .icon__investment, footer .icon__investment {
  position: absolute;
  overflow: visible !important; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * The search section.
 */
.search {
  /**
       * The search heading with the toggle.
       */
  /**
       * The submit buttons.
       */
  /**
       * The form wrapper.
       */
  /**
       * The label element surrounding the input field.
       */
  /**
       * 1. Foundation sets box-sizing to content-box.
       */ }
  @media screen and (min-width: 46rem) {
    .search__wrapper {
      height: 84px;
      display: flex;
      max-width: 75rem;
      margin-left: auto;
      margin-right: auto; } }
  @media screen and (max-width: 45.9375rem) {
    .search__wrapper {
      padding: 1rem; } }
  .search__label {
    color: #FEFEFE;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 1.4rem 1em; }
    @media screen and (max-width: 45.9375rem) {
      .search__label {
        padding: 1rem 1em; } }
    .search__label, .search__label:hover, .search__label:focus {
      color: #FEFEFE; }
      @media screen and (min-width: 46rem) {
        .search__label, .search__label:hover, .search__label:focus {
          color: #FEFEFE; } }
  .search__heading {
    display: none; }
    @media screen and (min-width: 46rem) {
      .search__heading {
        display: block; } }
  .search__submit {
    display: none;
    width: auto; }
    @media screen and (min-width: 46rem) {
      .search__submit {
        display: flex; } }
  .search__icon {
    padding: 0.4375rem; }
  .search__form {
    padding-right: 2em;
    padding-left: 1em;
    background-color: #0075BE;
    text-align: center; }
    @media screen and (min-width: 46rem) {
      .search__form {
        padding-right: 1em;
        padding-left: 1em;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #f5f6f7;
        text-align: left;
        z-index: 1; }
        .search:not(.is-open) > .search__form {
          display: none; }
        .no-js .search:hover > .search__form {
          display: block;
          z-index: 10; } }
    @media screen and (max-width: 45.9375rem) {
      .search__form {
        padding: 0; } }
  .search__label {
    flex: 1; }
    @media screen and (min-width: 46rem) {
      .search__label {
        margin-right: 1em;
        margin-left: 1em; } }
  .search__input, .search__input:active, .search__input:focus {
    text-align: center;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0.125rem;
    padding-top: 0;
    padding-bottom: 0; }
    @media screen and (min-width: 46rem) {
      .search__input, .search__input:active, .search__input:focus {
        background: none !important;
        text-align: left;
        margin: 0;
        box-shadow: none !important;
        font-weight: 300 !important;
        font-size: 1.62469rem !important; } }
  .search input[type="search"] {
    padding-top: 0;
    padding-bottom: 0;
    border: 0; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Megamenu Settings
 * namespace: $megamenu-
 * scope: @global.
 */
/* Max width */
/**
 * Root level link
 * These are used for th eroot level links.
 * There are declarations in the _primary.scss file AND
 *   _sign-in.scss file.
 * The font is a random number because they said match it with production
 *  ignore standards.
 */
/* Signin menu color */
/* Secondary header toggle */
/* Secondary header color */
/**
 * Base padding-left.
 * This is used on most elements for padding left for alignment.
 */
/**
 * The zipcode section.
 */
.zipcode {
  /**
   * The zipcode heading with the toggle.
   */
  /**
   * The submit buttons.
   */
  /**
   * The form wrapper.
   */
  /**
   * The label element surrounding the input field.
   */
  /**
   * 1. Foundation sets box-sizing to content-box.
   */ }
  .zipcode__wrapper {
    color: #FEFEFE; }
    .zipcode__wrapper [data-zipcode-megamenu-input] {
      margin-bottom: 0; }
    @media screen and (min-width: 63.9375rem) {
      .zipcode__wrapper.row > .columns {
        margin: 0; } }
    @media screen and (min-width: 46rem) {
      .zipcode__wrapper {
        display: flex;
        max-width: 75rem;
        margin-left: auto;
        margin-right: auto;
        color: #001928; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .zipcode__wrapper {
        margin: 0; }
        .zipcode__wrapper.row {
          max-width: 100%; }
          .zipcode__wrapper.row > .columns {
            padding: 0;
            margin: 0; }
        .zipcode__wrapper [data-zipcode-megamenu-set-button] {
          margin-left: 1em;
          width: auto; } }
    @media screen and (max-width: 45.9375rem) {
      .zipcode__wrapper [data-zipcode-megamenu-set-button] {
        margin-top: 1rem;
        margin-bottom: 1rem;
        width: 100%; }
      .zipcode__wrapper.row > .columns {
        margin: 0; } }
    .zipcode__wrapper button {
      text-decoration: none;
      font-size: 0.875rem;
      line-height: 1.5rem;
      letter-spacing: 0.01562rem;
      text-transform: none;
      font-weight: 600;
      display: inline-block;
      padding: 0.4em 2em;
      border: 0.125rem solid #0075BE;
      border-radius: 5em;
      background: #0075BE;
      color: #FEFEFE;
      text-align: center;
      transition: 300ms ease background-color, 300ms ease color, 300ms ease border-color;
      cursor: pointer;
      max-width: 90vw; }
      .zipcode__wrapper button:hover, .zipcode__wrapper button:active, .zipcode__wrapper button:focus {
        background: #00436c;
        border-color: #00436c;
        color: #FEFEFE;
        text-decoration: none;
        border: 0.125rem solid #0075BE; }
    .zipcode__wrapper .form-error {
      position: relative;
      top: 18px;
      left: 2px; }
      @media screen and (min-width: 46rem) {
        .zipcode__wrapper .form-error {
          position: relative;
          top: 18px;
          left: 2px; } }
    @media screen and (min-width: 46rem) {
      .zipcode__wrapper > div:first-child .zipcode__label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%); } }
  .zipcode__heading {
    display: none; }
    @media screen and (min-width: 46rem) {
      .zipcode__heading {
        display: block; } }
  .zipcode__submit {
    display: none; }
    @media screen and (min-width: 46rem) {
      .zipcode__submit {
        display: flex; } }
  .zipcode__form {
    box-sizing: border-box;
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 1em;
    padding-left: 1em;
    background-color: #0075BE;
    text-align: left; }
    @media screen and (min-width: 46rem) {
      .zipcode__form {
        padding-right: 1em;
        padding-left: 1em;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #f5f6f7;
        display: none;
        /**
       * Hide unopened zipcode toggles.
       */ }
        .is-open > .zipcode__form,
        .no-js .zipcode__form__toggle:hover + .zipcode__form,
        .no-js .zipcode__form:hover {
          display: block;
          z-index: 10; } }
  .zipcode__label {
    flex: 1; }
    @media screen and (max-width: 45.9375rem) {
      .zipcode__label {
        color: #FEFEFE; } }
    @media screen and (min-width: 46rem) {
      .zipcode__label {
        margin-right: 1em;
        margin-left: 1em; } }
  .zipcode__input {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    border: none;
    border-radius: 0.125rem;
    color: #001928; }
    .zipcode__input.has-error + .zipcode-error-msg {
      display: block; }
    .zipcode__input.has-error:focus + .zipcode-error-msg {
      display: none; }
  .zipcode__checkbox-span {
    margin-left: 0.5em; }
    .zipcode__checkbox-span::before {
      background-color: #FEFEFE; }
  @media screen and (max-width: 45.9375rem) {
    .zipcode__cookie-link {
      color: #FEFEFE; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    .zipcode__cookie-link {
      font-size: .85em; } }

/*
 * Checkbox Component
 *
 * Used in forms and compare tables
 *
 */
/**
 * The checkbox class is added to the actual input[type=checkbox] element.
 *
 * 1. Values pulled from the live site.
 */
.checkbox {
  /* 1 */
  /* 1 */
  /* 1 */
  /**
   * The label that wraps the checkbox component.
   */
  /*
   * The text associated with the checkbox.
   * This is what actually builds out the checkbox square thingy.
   *
   * 1. Align the checkbox and the content centered.
   */ }
  .checkbox__label {
    position: relative;
    display: inline-flex;
    padding: 0;
    cursor: pointer; }
    @media screen and (max-width: 45.9375rem) {
      .checkbox__label {
        color: #FEFEFE; } }
    .checkbox__label--full {
      display: flex;
      align-items: center; }
  .checkbox__short-desc {
    font-size: 0.75rem; }
  .checkbox__content {
    display: inline-flex;
    /* 1 */
    align-items: center;
    /* 1 */
    /**
      * If checkbox right class attached add space to place checkbox element on the right
      */
    /**
      * display checkbox content in column fashion
      */
    /**
     * The before pseudo is what actually renders out the checkbox.
     *
     * 1. By default it is empty.
     * 2. Place the checkmark in the center of the box.
     */ }
    .checkbox--right .checkbox__content {
      padding-right: 2.25em; }
    .checkbox__content--col {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; }
    .checkbox__content::before {
      content: "\2713";
      /* 1 */
      margin-right: 0.5em;
      display: inline-flex;
      /* 2 */
      width: 1.25em;
      height: 1.25em;
      align-items: center;
      /* 2 */
      justify-content: center;
      /* 2 */
      border: 0.0625rem solid #929ba9;
      border-radius: 0.125rem;
      color: transparent;
      /* 1 */
      /**
       * When the checkbox is checked add the check.
       * TODO: There might be a time when designers what a SPECIFIC checkmark.
       *        When that time comes use a background-image svg.
       *
       * 1. We cannot set:
       *      content: "";
       *    To hide the checkmark because the input changes height and causes a reflow.
       *    Instead we change the color to transparent which hides it.
       */
      /**
        * If checkbox right class attached place checkbox element on the right
        */ }
      .checkbox:checked + .checkbox__content::before {
        color: #0075BE; }
      .checkbox--right + .checkbox__content::before {
        position: absolute;
        right: 0;
        transform: translateX(-100%); }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

header .contact-us, footer .contact-us {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 1em;
  padding-left: 2em;
  border-top: 0.125rem solid #FEFEFE;
  color: #FEFEFE;
  /**
   * The actual contact links.
   */ }
  header .contact-us__heading, footer .contact-us__heading {
    margin-bottom: 1em;
    display: block; }
  header .contact-us__link, footer .contact-us__link {
    display: inline-block;
    padding-top: 0.25em;
    padding-bottom: 0.25em; }
    header .contact-us__link, header .contact-us__link:hover, header .contact-us__link:focus, footer .contact-us__link, footer .contact-us__link:hover, footer .contact-us__link:focus {
      color: #FEFEFE; }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Megamenu Settings
 * namespace: $megamenu-
 * scope: @global.
 */
/* Max width */
/**
 * Root level link
 * These are used for th eroot level links.
 * There are declarations in the _primary.scss file AND
 *   _sign-in.scss file.
 * The font is a random number because they said match it with production
 *  ignore standards.
 */
/* Signin menu color */
/* Secondary header toggle */
/* Secondary header color */
/**
 * Base padding-left.
 * This is used on most elements for padding left for alignment.
 */
/**
 * 1. The height of the back link.
 *     This is a magic number.
 *     TODO: Find a way of calculating it.
 * 2. The back link should be a little smaller then the left padding.
 *     This adds some space between the link and button.
 */
.main-nav {
  /* 1 */
  /* 2 */
  /**
     * The site-item wraps around the site sections (personal | wealth)
     */
  /**
     * The actual links in the long list.
     */
  /**
     * The back button for the megamenu lob section.
     */
  /**
     * The section with all of the links.
     * 1. Create an anchor for the back buttons.
     */ }
  @media screen and (min-width: 63.9375rem) {
    .main-nav {
      flex: 1; } }
  .main-nav__site-item {
    display: none; }
    @media screen and (min-width: 46rem) {
      .main-nav__site-item {
        display: none; }
        .main-nav__site-item[class*="is-current"] {
          display: block; } }
    .main-nav__site-item[class*="is-current"] {
      display: block; }
  .main-nav__link {
    display: flex;
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 1em;
    padding-left: 2.5em;
    justify-content: space-between;
    align-items: center;
    background-color: #0075BE;
    border-bottom: 0.0625rem solid #FEFEFE;
    width: 100%;
    line-height: 1.15rem;
    /**
       * The active navigations links.
       */
    /**
       * The site links are the top level links.
       *   ex. Personal | Wealth | Business
       */
    /**
       * This is used for meganav toggles.
       *   [data-mega-header-section-toggle]
       * They should only be hidden on small screens.
       */ }
    @media screen and (max-width: 45.9375rem) {
      .main-nav__link {
        line-height: 1.4rem;
        text-align: left; } }
    @media screen and (min-width: 46rem) {
      .main-nav__link {
        display: block;
        padding: 0;
        background-color: transparent;
        border-bottom: none; } }
    .main-nav__link, .main-nav__link:hover, .main-nav__link:focus {
      color: #FEFEFE;
      text-decoration: none; }
      @media screen and (min-width: 46rem) {
        .main-nav__link, .main-nav__link:hover, .main-nav__link:focus {
          color: #001928; } }
    .main-nav__link:hover, .main-nav__link:focus {
      background-color: #73c3eb; }
      @media screen and (min-width: 46rem) {
        .main-nav__link:hover, .main-nav__link:focus {
          background-color: transparent; } }
    .main-nav__link--active {
      background-color: #0075BE;
      border-bottom: 0.125rem solid #FEFEFE; }
      @media screen and (min-width: 46rem) {
        .main-nav__link--active {
          background-color: transparent;
          color: #0075BE;
          border-bottom: none; } }
    @media screen and (min-width: 46rem) {
      .main-nav__link--site {
        padding-left: 0; }
        .main-nav__link--site, .main-nav__link--site--follow-through {
          display: none; } }
    @media screen and (max-width: 45.9375rem) {
      .main-nav__link--hidden {
        display: none; } }
  .main-nav__back {
    display: flex;
    position: absolute;
    height: 3.5em;
    width: 1.9em;
    top: 10.3em;
    left: 0;
    justify-content: center;
    align-items: center;
    background: #FEFEFE;
    color: #0075BE;
    z-index: 1001; }
    @media screen and (min-width: 46rem) {
      .main-nav__back {
        display: none; } }
  @media screen and (max-width: 45.9375rem) {
    .main-nav__mobile_position {
      position: relative; } }
  .main-nav__site {
    position: relative;
    /* 1 */
    /**
       * 1. Remove the hook for absolute positioned elements.
       */ }
    @media screen and (max-width: 45.9375rem) {
      .main-nav__site {
        z-index: 1000;
        /**
         * Display the section when it is flagged as open.
         */ }
        .no-js .main-nav__site {
          display: block; } }
    @media screen and (min-width: 63.9375rem) {
      .main-nav__site {
        position: static; } }

/**
 * The main navigation with the lob links.
 */
.lob-nav {
  /**
   * The ad section of the main navigation.
   */
  /**
   * The banner that appears below some sections.
   *   ex: Credit cards
   * Its just a list of links
   */
  /**
   * The tabs on tablet and desktop.
   */
  /**
   * The heading for each list in the megamenu.
   */
  /**
   * The nav item thar wraps the page links.
   */
  /**
   * The section holds the actual page links.
   */
  /**
   * These are the links inside the megamenu drawer.
   * They are the ones that actually lead out to the pages.
   */
  /**
   * The LOBS list.
   */
  /**
   * The individual list items.
   * 1. Random number because match production.
   */
  /**
  * Adjustment for desktop privatebanking english
  *
  */
  /**
   * The unordered list that actually holds the lob links.
   */
  /**
   * The lob link leading to different pages.
   */ }
  .lob-nav__ad {
    display: none; }
    @media screen and (min-width: 63.9375rem) {
      .lob-nav__ad {
        display: block;
        padding-bottom: 1em;
        padding-left: 0.5em; } }
  .lob-nav__banner {
    flex-basis: 100%; }
    @media screen and (min-width: 46rem) {
      .lob-nav__banner {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        padding-top: 1em;
        padding-bottom: 1em;
        background-color: #f5f6f7; } }
  .lob-nav__tab {
    /**
     * 1. They want it EXACLTY like production so this random font size needs to be added.
     */ }
    @media screen and (min-width: 46rem) {
      .lob-nav__tab:hover,
      .lob-nav__lob:hover > .lob-nav__tab, .lob-nav__tab.is-active {
        background-color: #f5f6f7; } }
    .lob-nav__tab.is-current {
      font-weight: 700; }
    @media screen and (min-width: 46rem) {
      .lob-nav__tab {
        font-size: 0.8125rem;
        /* 1 */
        display: flex;
        padding: 1.5em 0.5em;
        border-top: 0.0625rem solid #f5f6f7;
        border-bottom: 0.0625rem solid #f5f6f7;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        text-align: center;
        height: 100%;
        min-height: 70px; }
        .lob-nav__lob > .lob-nav__tab {
          border-left: 0.0625rem solid #f5f6f7; } }
    @media screen and (min-width: 63.9375rem) {
      .lob-nav__tab {
        border-bottom: none;
        border-top: none; } }
  .lob-nav__heading {
    display: none; }
    @media screen and (min-width: 46rem) {
      .lob-nav__heading {
        display: block;
        margin-bottom: 1em;
        font-weight: bold; } }
    @media screen and (min-width: 63.9375rem) {
      .lob-nav__heading--strong {
        padding-bottom: 1.33rem; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__heading-med-up.lob-nav__link {
      color: #0075BE;
      display: block;
      margin-bottom: 1em;
      font-weight: bold; }
      .lob-nav__heading-med-up.lob-nav__link:hover {
        color: #005587;
        text-decoration: underline; } }
  .lob-nav__nav-multi-row {
    display: flex;
    flex-direction: column;
    max-height: initial;
    flex-wrap: nowrap;
    width: 100%;
    overflow: initial; }
    @media screen and (min-width: 63.9375rem) {
      .lob-nav__nav-multi-row {
        width: 47%;
        /*As per design*/ } }
    @media screen and (min-width: 46rem) {
      .lob-nav__nav-multi-row {
        max-height: 27em;
        flex-wrap: wrap;
        overflow: hidden; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__nav {
      padding-right: 1em;
      padding-left: 1em;
      padding-bottom: 1em;
      flex: 1;
      width: 50%;
      /**
       * 1. Multi column navs must take up more space then the normal navs.
       */ }
      .lob-nav__nav--multi-column {
        flex: 2;
        /* 1 */ } }
  @media screen and (min-width: 63.9375rem) {
    .lob-nav__nav {
      padding-bottom: 0; } }
  .lob-nav__nav-multi-row-item {
    flex: none;
    display: block; }
    @media screen and (min-width: 46rem) {
      .lob-nav__nav-multi-row-item {
        padding-bottom: 1em; } }
  @media screen and (max-width: 45.9375rem) {
    .lob-nav__section {
      display: none; }
      .lob-nav__section.is-open__mobile_only {
        display: block; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__section {
      display: none;
      position: absolute;
      padding-top: 1em;
      top: 100%;
      right: 0;
      left: 0;
      background-color: #FEFEFE;
      z-index: 100;
      box-shadow: 0 0.3125rem 0.3125rem 0 rgba(0, 25, 40, 0.2);
      /**
       * Conditions to display the section:
       *    JavaScript blocked and the anchor hovered.
       *    The nav anchor is focused.
       *    The JavaScript module failed at some point.
       *    The section is focused / hovered / open
       */ }
      .no-js .lob-nav__tab:hover + .lob-nav__section,
      .js-failed:hover + .lob-nav__section, .lob-nav__section.is-open {
        display: block; } }
  @media screen and (min-width: 63.9375rem) {
    .lob-nav__section {
      padding-top: 2em;
      padding-bottom: 1em;
      border-top: 0.0625rem solid #929ba9; } }
  .lob-nav__wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 75rem; }
    @media screen and (min-width: 46rem) {
      .lob-nav__wrapper {
        display: flex;
        flex-wrap: wrap; } }
  @media screen and (max-width: 45.9375rem) {
    .lob-nav__follow-through {
      font-size: inherit; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__follow-through {
      padding-bottom: 1em;
      padding-left: 0.5em;
      flex-basis: 100%; } }
  @media screen and (min-width: 63.9375rem) {
    .lob-nav__follow-through {
      display: none; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__follow-through-link::after {
      /**
   * Default transforms for the `down` position.
   */
      /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-left: 0.125rem solid #0075BE;
      border-top: 0.125rem solid #0075BE;
      transform-origin: 0 0;
      transform: rotate(135deg) translate(20%, -50%);
      margin-left: 0.5em;
      margin-bottom: 0.0625rem; }
    .lob-nav__follow-through-link:hover::after {
      /**
   * Default transforms for the `down` position.
   */
      /**
   * Transforms based on the direction desired.
   * Rotation is calculted simply by drawing a square and rotating it.
   *   Add 45 degrees to offset the initial position (Get the corner pointing up).
   */
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      border-left: 0.125rem solid #001928;
      border-top: 0.125rem solid #001928;
      transform-origin: 0 0;
      transform: rotate(135deg) translate(20%, -50%); } }
  @media screen and (min-width: 46rem) {
    .lob-nav__lobs {
      display: flex;
      justify-content: flex-end; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__lob {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch; } }
  @media screen and (min-width: 63.9375rem) {
    .lob-nav__lob {
      display: flex;
      flex: 0;
      flex-basis: 10%;
      /* 1 */ }
      .lob-nav__lob__large {
        flex-basis: 18%; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__lob-harris {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch; } }
  @media screen and (min-width: 63.9375rem) {
    .lob-nav__lob-harris {
      display: flex;
      flex: 0;
      flex-basis: 12%;
      /* 1 */ }
      .lob-nav__lob-harris__large {
        flex-basis: 18%; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__padding-adjust-1 > a.main-nav__link {
      padding-left: .35em;
      padding-right: .35em; } }
  .lob-nav__pages {
    /**
     * Wraps the links.
     */ }
    @media screen and (min-width: 46rem) {
      .lob-nav__pages {
        flex: 1; } }
    @media screen and (min-width: 63.9375rem) {
      .lob-nav__pages {
        padding-right: 0.5em; } }
    @media screen and (min-width: 46rem) {
      .lob-nav__pages-wrapper {
        display: flex; } }
  @media screen and (min-width: 46rem) {
    .lob-nav__link {
      margin-bottom: 0.5em; } }
  .lob-nav__link:hover, .lob-nav__link:focus {
    color: #0075BE; }

@media screen and (min-width: 63.9375rem) {
  .cta-nav__multi-row {
    flex-basis: 13rem; } }

/**
 * The cta navigation.
 */
.cta-nav {
  display: none;
  /**
   * The CTA time content.
   */
  /**
   * The CTA heading.
   */
  /**
   * The CTA footer.
   */
  /**
   * The ctas list.
   */
  /**
   * The actual anchor tag.
   */ }
  @media screen and (min-width: 46rem) {
    .cta-nav {
      display: block;
      padding-top: 1em;
      padding-right: 1em;
      padding-bottom: 1em;
      padding-left: 1em;
      background-color: #0075BE; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    .cta-nav {
      flex-basis: 100%; } }
  @media screen and (min-width: 63.9375rem) {
    .cta-nav {
      padding-top: 0;
      padding-right: 0;
      padding-left: 1em;
      border-left: 0.0625rem solid #929ba9;
      background-color: transparent;
      flex-basis: 18rem; } }
  .cta-nav__times-content {
    color: #FEFEFE; }
    @media screen and (min-width: 63.9375rem) {
      .cta-nav__times-content {
        color: #001928; } }
  .cta-nav__heading {
    margin-bottom: 1em;
    color: #FEFEFE;
    font-weight: bold; }
    @media screen and (min-width: 63.9375rem) {
      .cta-nav__heading {
        color: #001928; } }
    .cta-nav__heading--tel {
      font-weight: normal; }
      @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
        .cta-nav__heading--tel {
          color: #FEFEFE; } }
      @media screen and (min-width: 63.9375rem) {
        .cta-nav__heading--tel {
          display: flex;
          align-items: center; } }
  .cta-nav__footer {
    padding-left: 50px; }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .cta-nav__footer {
        color: #FEFEFE;
        margin-left: 66.7%;
        padding-left: 3.5rem; } }
  .cta-nav__ctas {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (min-width: 63.9375rem) {
      .cta-nav__ctas {
        display: block; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .cta-nav__ctas {
        flex-direction: column;
        align-items: flex-start; } }
  .cta-nav__cta {
    padding-right: 0.5em;
    padding-left: 0.5em;
    flex: 1;
    flex-basis: 33%; }
    .cta-nav__cta:first-child {
      padding-left: 0; }
    .cta-nav__cta:last-child {
      padding-right: 0; }
    @media screen and (min-width: 63.9375rem) {
      .cta-nav__cta {
        padding-right: 0;
        padding-bottom: 0.5em;
        padding-left: 0; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .cta-nav__cta {
        padding: 0; } }
  .cta-nav__link {
    white-space: normal; }
    .cta-nav__link, .cta-nav__link:hover, .cta-nav__link:focus {
      color: #FEFEFE; }
      @media screen and (min-width: 63.9375rem) {
        .cta-nav__link, .cta-nav__link:hover, .cta-nav__link:focus {
          color: #0075BE;
          font-weight: bold; } }
    @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
      .cta-nav__link {
        margin-bottom: .5em; } }
  @media screen and (min-width: 46rem) and (max-width: 63.875rem) {
    .cta-nav__icon {
      background: #FEFEFE !important;
      color: #0075BE !important; } }

/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

/**
 * Megamenu Settings
 * namespace: $megamenu-
 * scope: @global.
 */
/* Max width */
/**
 * Root level link
 * These are used for th eroot level links.
 * There are declarations in the _primary.scss file AND
 *   _sign-in.scss file.
 * The font is a random number because they said match it with production
 *  ignore standards.
 */
/* Signin menu color */
/* Secondary header toggle */
/* Secondary header color */
/**
 * Base padding-left.
 * This is used on most elements for padding left for alignment.
 */
/**
 * 1. Calculate full width minus toggle size plus one.
 */
.secondary-header {
  /**
     * Wraps the secondary header.
     */
  /**
     * The close button is located inside the secondary nav.
     * 1. Hide the close button, otherwise it sits above the open button even when closed.
     * 2. Set the transition delay to the same amount of time it takes for the menu to open.
     *     This will cause the close button to dissapear as soon as the menu is closed.
     */ }
  @media screen and (min-width: 46rem) {
    .secondary-header {
      position: relative;
      border-bottom: 0.0625rem solid #929ba9; } }
  .secondary-header__wrapper {
    position: absolute;
    max-width: 75rem;
    min-width: 18.5em;
    margin-right: auto;
    margin-left: auto;
    top: 0;
    left: 0;
    z-index: 1000;
    width: calc(100% - 5rem);
    /* 1 */
    background: #0075BE;
    /**
       * 1. When the secondary header is open display it.
       */
    /**
       * Should be always open on tablet up.
       */ }
    @media screen and (max-width: 45.9375rem) {
      .secondary-header__wrapper {
        margin-right: 0;
        transform: translate(-101%);
        transition: transform 300ms ease-in-out; }
        .secondary-header__wrapper.open {
          transform: none; } }
    .secondary-header.is-open > .secondary-header__wrapper,
    .no-js .secondary-header__toggle:hover ~ .secondary-header > .secondary-header__wrapper,
    .no-js .secondary-header:hover > .secondary-header__wrapper {
      transform: none;
      /* 1 */ }
    .secondary-header__wrapper.is-open {
      transform: none;
      /* 1 */ }
    @media screen and (min-width: 46rem) {
      .secondary-header__wrapper {
        display: block;
        position: static;
        width: 100%;
        justify-content: center;
        align-items: center;
        background-color: #FEFEFE;
        transform: none; } }
    @media screen and (min-width: 63.9375rem) {
      .secondary-header__wrapper {
        display: flex;
        justify-content: space-between; } }
  .secondary-header__close {
    position: absolute;
    top: 0;
    left: 100%;
    transform: scale(0);
    /* 1 */
    transition: 0ms transform linear 300ms;
    /* 2 */
    /**
       * 1. Display the close button when the header is open.
       *     The opening animation takes 300ms this is instant so we cant tell the difference
       * 2. Remove the transition since we want the close button to appear INSTANTLY when the menu opens.
       */ }
    .secondary-header.is-open .secondary-header__close {
      transform: none;
      /* 1 */
      transition: none;
      /* 2 */ }
  .secondary-header__toggle {
    display: flex;
    width: 5rem;
    height: 5rem;
    justify-content: center;
    align-items: center;
    background-color: #0075BE;
    padding: 0px 1em; }
    @media screen and (max-width: 45.9375rem) {
      .secondary-header__toggle {
        position: absolute;
        top: 0px;
        left: 100%;
        /* 1 */
        transition: left 300ms ease-in-out; }
        .secondary-header__toggle path {
          fill: #fff;
          stroke: #fff; }
        .secondary-header__toggle.open {
          transform: none; } }


/*
 Given a string, split by the $separator then return a list.
*/
/*
    Given a class prefix and a class name, return a name with the
    prefix prepended with a dash if prefix is given
*/
/*320*/
/*1200*/
/*1280*/
/*767*/
/*768*/
/*1023*/
/*1024*/
/*1279*/
/*1280*/
/**
  * $site is set to default to 'bmo' in this file.
  *
  * It is also appropriately set to 'bmoharris' or 'bmo' based on what
  * domain is used by the page on the Django side.
  *
**/
/* stylelint-disable unit-blacklist */
/* This has to be set in pixels because its the base font size */
/* stylelint-enable unit-blacklist */
/* Box-shadow is a very specific value, has to be this exact declaration */
/* March 16, 2018
 * $input-padding needs to be changed as soon as we figure out why $input-padding: $spacing--small worked for bespoke but not for us.
 * Currently, we can't use the old bespoke scss because it $spacing--small (an em value) conflicts with a rem calculation made in the Foundation package forms.
 * So for now, we'll move it to a new variable ($input-padding-bmo) so that we can use it by our components.
 */
/* rem-calc(16) is the default $form-spacing value */
/* the original bespoke scss */
/* !! This isn't synced to _input.scss */
/*  ################################################  */
/*  #### Tools: Site-wide mixins and functions. ####  */
/*  ################################################  */
/**
 * Parses the passed in variable and returns the json representation of it.
 * 
 * 
 * This is used to avoid duplicate data
 * the colors json creator returns a json string to be parsed by the browser with our full color palette.
 * 
 */
/**
 * Utility creator mixin.
 * It is used in the creation of utility classes.
 *   small-text-left,
 *   medium-border-top
 *   ...
 *
 * WARNING
 * THE UTILITY MIXIN CREATES A LOT OF CODE.
 * USE WITH CAUTION.
 *
 * Use:
 *   @include (className) {
 *     // CSS HERE
 *   }
 */
/**
 * Creates utility classes
 * @param  {String} $class:  null          The class name to generate utilities for.
 * @param  {List} $breaks:   all           A list of breakpoints to apply.
 */
/**
 * A mixin for creating a chevron on the given element.
 * This should be used within the pseudo `::before` or `::after`
 * But can be used anywhere.
 * @param  {String} $direction:    down           The direction of the chevron
 * @param  {Color}  $color:        $color-primary The color of the chevron.
 * @param  {Number} $size:         .5em           The size of the chevron (width, height).
 * @param  {Number} $border-width: rem-calc(2)    The border with of the chevron.
 *                                                 This makes it thicker/thinner.
 */
/* stylelint-disable no-unsupported-browser-features */
/* Disable stylelint since it throws error for the @supports rule */
/**
 * The grayscale trump adds a greyish overlay making it seem disabled.
 */
/* stylelint-enable no-unsupported-browser-features */
/*
 * Since design wants the mobile accordion to act like an info-block in desktop view
 * we need to create a mixin here and call it in the info-block and the mobile accordion
 * At least this way if there are ever style changes to the info-block it will be reflected in the mobile-accordion
 */
/**
 * A mixin for creating a bottom border that animates out from the
 * middle on :hover.
 * @param  {String} $height:  $border-size--thick   The height of the border.
 * @param  {Color}  $color:   $color-primary        The color of the border.
 */
/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  src: url("/dist/fonts/heebo-light-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  src: url("/dist/fonts/heebo-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  src: url("/dist/fonts/heebo-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-hebrew.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F; }

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  src: local("Heebo Bold"), local("Heebo-Bold"), url("/dist/fonts/heebo-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato.woff2") format("woff2"), url("/dist/fonts/lato.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-bold.woff2") format("woff2"), url("/dist/fonts/lato-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Lato";
  src: url("/dist/fonts/lato-italic.woff2") format("woff2"), url("/dist/fonts/lato-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax.woff2") format("woff2"), url("/dist/fonts/dax.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light.woff2") format("woff2"), url("/dist/fonts/dax-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium-italic.woff2") format("woff2"), url("/dist/fonts/dax-medium-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-medium.woff2") format("woff2"), url("/dist/fonts/dax-medium.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-bold.woff2") format("woff2"), url("/dist/fonts/dax-bold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "Dax";
  src: url("/dist/fonts/dax-light-italic.woff2") format("woff2"), url("/dist/fonts/dax-light-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona.woff2") format("woff2"), url("/dist/fonts/emona.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-semibold.woff2") format("woff2"), url("/dist/fonts/emona-semibold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@font-face {
  font-family: "Emona";
  src: url("/dist/fonts/emona-bold-italic.woff2") format("woff2"), url("/dist/fonts/emona-bold-italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039; }

@media screen and (min-width: 46rem) {
  .reveal--design-width {
    width: 670px; } }